<title>Overview</title> Overview Fireworks is the premier graphics software package for the design and optimization of Web graphics and animations. With Fireworks, you can produce professional Web graphics without leaving the application. Before Fireworks, you had to switch between different software packages to produce polished graphics for the Web. With Fireworks, you can create impressive graphics that have a bitmap look. Yet the graphics are editable as vector objects. Apply bitmap brush strokes, textured fills, drop shadows, bevels, glows, and many other bitmap characteristics to graphics or text. If you reshape the graphic or change the text attributes, the bitmap effects update automatically to reflect your changes. In addition, the bitmap characteristics themselves are fully editable. To make the creation of your Web pages even easier, you can create JavaScript rollovers, buttons, and navigation bars without coding. Fireworks 3 also contains many features for easy integration with Dreamweaver.
<url>html/01Intro2.html</url>
<title>What's new in Fireworks 3?</title> What's new in Fireworks 3? Fireworks 3 offers several new features that make it easy to create Web graphics and animations. Dreamweaver integration The Fireworks integration with Dreamweaver helps you produce Web pages quickly and efficiently. Work compatibly with the Behaviors inspector in both Dreamweaver and Fireworks. See XXXX Launch and edit Fireworks graphics from within Dreamweaver without having to locate the Fireworks source file. See XXX Insert Fireworks HTML into Dreamweaver and update links automatically. See XXXX Export preview in the workspace The new export preview in the workspace lets you view optimized graphics without opening the Export Preview dialog box. Use the new Preview tab to view optimized graphics in the workspace. See XXXXXX Use the new Optimize panel to optimize graphics in the workspace. See XXXX. Use the 2-up and 4-up tabs to display multiple views of a graphic with different optimization settings. See XXXXX Select individual slices without leaving the Optimize panel. See XXXXXX History panel The new History panel gives you the power to automate tasks and quickly undo multiple steps. Select items in the History list and make them commands. By making the steps commands, you can apply a series of steps to other objects at one time. See XXXXXX Copy a series of steps in the History panel as JavaScript. Then paste the JavaScript to another object or paste it into a text editor. See XXXXX Improved handling of Photoshop effects and files The following improvements make it easy to leverage Photoshop effects and graphics created in Photoshop: Edit Photoshop layer effects using the Effect panel. You can edit the effect, or remove it from an object entirely. See XXXX Retain the editability of text layers in imported Photoshop files. See XXXXXX Illustrator and Flash export Export Fireworks graphics for import into Illustrator and FreeHand. See XXXXXXX Export Fireworks graphics for import into Flash. See XXXXXXX Improved slice, rollover, and animation features These improved features make it easier to create impressive navigation bars, rollovers, and animated GIF files: Create and edit JavaScript rollover buttons using the new Button Edit window. See XXXXX Create navigation bars using new Dreamweaver-compatible behaviors, such as Set Navigation Bar Image. You can also create navigation bars quickly using the new Button objects. See XXXXX Update Fireworks 3 tables in any HTML file. Create polygonal slices that let you swap irregularly shaped interlocking images. See XXXXX Create overlapping slices without HTML errors. See XXXXXX Use the Symbols library that looks and behaves like the Symbols library in Flash. The new Button symbol makes the creation of rollover buttons easy. See XXXXX New bitmap editing options New bitmap editing options make it easy to correct images without leaving Fireworks. Adjust the Contrast/Brightness of an image. See XXXX Adjust the Hue/Saturation of an image. See XXXXX Correct the tonal range of an image using the Levels, Auto Levels, and Curves features. See XXXX New gamma preview The gamma preview lets you view how a graphic looks on another computer platform. When working on the Windows platform, view how a graphic looks on the Macintosh platform and vice versa. See XXXXX Instant access to non-Fireworks textures and patterns Using non-Fireworks textures and patterns expands your creative options. Firework 3 lets you use any bitmap texture or pattern that resides on your hard drive. See XXXX New scaling, rotation, and angle controls These new controls offer added flexibility in editing graphics: Choose the appropriate scaling method for a particular graphic using the bicubic, bilinear, nearest neighbor, or soft interpolation scaling options. See XXXXX Rotate the canvas and all of the objects on the canvas. See XXXXX Text improvements The following text improvements give you precise text control: Resize text blocks automatically. Text blocks expand vertically and horizontally, as needed. See XXXXX View a font before applying it to text using the Font preview. See XXXXX Substitute missing fonts for another font installed on your computer. The next time you open the document, Fireworks remembers the new font you specified. See XXXXX
<url>html/01Intro3.html</url>
<title>System requirements</title> System requirements Fireworks runs either in Windows or on the Macintosh operating system. Running Fireworks in Windows requires: Windows 95, Windows 98, or Windows NT 4 (with Service Pack 3) or later Intel Pentium 120 MHz processor required (Pentium II recommended) 32 MB of system RAM on Windows 95 or Windows 98 (40 MB or more recommended for Windows NT) Running Fireworks on a Macintosh requires: System 7.5.5 or later Adobe Type Manager 4 or later to use Type 1 fonts Power Macintosh processor required (G3 recommended) 24MB of application RAM with virtual memory on (32 MB or more with virtual memory off recommended) Running Fireworks on either operating system requires: 60 MB of available hard disk space (100 MB or more recommended) CD-ROM drive Mouse or digitizing tablet 640x480 resolution, 256-color monitor required (1024x768 resolution, millions of colors recommended)
<url>html/01Intro4.html</url>
<title>Installing and starting Fireworks</title> Installing and starting Fireworks Before installing Fireworks, make sure your computer meets the system requirements listed in System requirements . Read the ReadMe document on the Fireworks CD-ROM for late-breaking information. To install and start Fireworks on Windows: 1 Insert the Fireworks CD-ROM in your CD-ROM drive. 2 Follow the instructions that appear on screen. The installer application prompts you to enter required information. 3 When Fireworks is installed, launch Fireworks from the Start menu. Windows operating systems have alternative ways to install Fireworks: Double-click the installation application Setup.exe. Click the Install button in the Add/Remove Programs module on the Control Panel and navigate to the Setup.exe application in the Fireworks folder. Use the Run command in the Start menu and navigate to the Setup.exe application in the Fireworks folder. Select the CD-ROM icon on the Windows Explorer or My Computer, right-click to display the menu, and choose AutoPlay. Note: To disable AutoPlay, hold down the Shift key while inserting the Fireworks CD-ROM. To install and start Fireworks on a Macintosh: 1 Disable virus-protection extensions and restart your computer. 2 Insert the Fireworks CD-ROM in your CD-ROM drive. 3 Double-click to launch the Fireworks Installer. 4 Follow the instructions that appear on screen. 5 Double-click the Fireworks icon to launch Fireworks from the Finder.
<url>html/01Intro5.html</url>
<title>Uninstalling Fireworks</title> Uninstalling Fireworks Use the uninstaller to ensure that all Fireworks files are removed from the computer. To uninstall Fireworks on Windows NT 4, Windows 95, or Windows 98: 1 Click Start and choose Settings > Control Panel. 2 Double-click Add/Remove Programs. 3 Select Macromedia Fireworks 3 in the list box. Click the Add/Remove button. 4 Follow the instructions that appear on screen. The uninstaller removes all Fireworks 3 program files from your system. On Windows, manual uninstallation may fail to remove several DLLs and registry database entries. To uninstall Fireworks on the Macintosh: 1 Run the Fireworks 3 installer and choose Remove from the Options pop-up. 2 Follow the instructions that appear on screen. The uninstaller removes all Fireworks application files from your computer. On the Macintosh, manually removing Fireworks can fail to remove several preference files in the System folder. If you used Custom installation to install Fireworks in a different folder than the default location, you must specify the same location when uninstalling.
<url>html/01Intro6.html</url>
<title>Resources for learning Fireworks</title> Resources for learning Fireworks Use these resources to learn Fireworks quickly: Fireworks Help Fireworks Help, available whenever the Fireworks application is active, includes the Using Fireworks manual in an HTML format. Fireworks tutorial The Fireworks tutorial, included in this manual, contains step-by-step lessons for creating the components of a Web home page. The lessons include the most common Fireworks tasks, such as optimizing GIFs and JPEGs, and creating animations, image maps, and rollovers. Fireworks application The Fireworks application contains many dialog boxes and ToolTips designed to assist you in using the program. ToolTips appear when your cursor pauses over a user interface element. Instructional dialog boxes appear when you attempt to use certain tools incorrectly. Using Fireworks manual The Using Fireworks manual includes information about basic and advanced Fireworks features. www.macromedia.com Macromedia's award-winning Web site contains Fireworks tutorials, sample art, and updates. TechNotes Navigate to http://www.macromedia.com/support/fireworks/ to search for frequently updated technical information on Fireworks. Fireworks discussion group For discussion on Fireworks topics with Fireworks users, technical support representatives, and the Fireworks development team, use a news group reader to go to news://forums.macromedia.com/macromedia.fireworks.
<url>html/02tutorial1.html</url>
<title>Tutorial overview</title> Tutorial overview This tutorial introduces you to the key features of Macromedia Fireworks in approximately one hour. For detailed information about any of the features covered in this tutorial, see the index in this user guide. For an animated introduction to Fireworks, click the play button below. During this tutorial, you'll complete the home page for a fictional coffee company. Before you start working, open the completed file to see what you'll be creating. 1 In Fireworks, choose File > Open, and open the file Tutorial_Final.png located in the Tutorial folder inside the Fireworks 3 application folder. 2 Click the Show Hotspots and Slices button at the bottom of the Toolbox. The green and blue rectangles that appear over the image designate hotspots and slices. You'll learn how to create and use hotspots and slices in this tutorial. 3 Click the Hide Hotspots and Slices button. 4 If you want, choose View > Zoom Out to make the finished artwork smaller and leave the file open as you work. If you don't want the file open, choose File > Close. Now open the file you'll be working with to start the tutorial. 5 Choose File > Open, and open the file Tutorial_Start.png located in the Tutorial folder inside the Fireworks 3 application folder. 6 Choose File > Save As. Name the file my_work and click Save.
<url>html/02tutorial10.html</url>
<title>Export images, HTML, and JavaScript</title> Export images, HTML, and JavaScript When exporting your document, Fireworks exports individual files for all the slices. It also generates all the HTML and JavaScript code that you need to display the document in a Web browser. Fireworks makes it easy to export the images, HTML, and JavaScript code to incorporate into a site you are creating and managing with Macromedia Dreamweaver. 1 Choose File > Export. Exporting the document creates a series of image files for each slice and an HTML file. To make it easy for you to remove these files later, export them to a new folder. 2 Choose a location, click the New Folder button, and name the folder. Make sure the new folder's name appears at the top of the dialog box. 3 Accept the default for base name. Fireworks uses this name for the HTML file that it creates and as the base for naming all the resulting GIF and JPEG files that are created due to the slicing. You can modify the way Fireworks names files, as well as set other properties of the exported HTML, by clicking the Setup button. For more information, see "Exporting an image" on page 164 . 4 Choose Use Slice Objects from the Slicing pop-up menu. This makes sure that all the buttons, behaviors, and optimizations function when displayed in a browser. 5 Choose Dreamweaver 3 from the Style pop-up menu. This creates HTML code that is optimized for use in Dreamweaver 3. 6 Make sure that the Location pop-up menu is set to Same Directory. This option lets you specify where you want the HTML file saved in relation to the exported images. You can even copy all the HTML to the Clipboard to paste it directly into a Dreamweaver file. 7 Click Save (Windows) or Export (Macintosh) to export the files. The HTML file can now be viewed in a browser or opened in Dreamweaver for further modification. If desired, preview the document in a Web browser to see how it looks and to test the buttons you created. 8 Open a Web browser, choose File > Open > Page in Navigator (Netscape Navigator) or File > Open (Microsoft Internet Explorer), and select the HTML file you exported. You can also open a browser directly from Fireworks by choosing File > Preview in Browser and choosing a browser. If one isn't listed, choose Set Browser to add a primary and secondary browser to the list. 9 After testing the exported HTML, return to Fireworks and close the file.
<url>html/02tutorial11.html</url>
<title>Animation</title> Animation You create animated GIFs in Fireworks using frames. Each frame contains a different image. Elements that you want to appear in all frames are placed on a separate layer that is shared among all the frames. As the sequence of frames is displayed in order, it creates the illusion of movement. 1 Open the document Animated_Start.png located in the Tutorial folder in the Fireworks application folder. 2 Display the Layers panel and click the New / Duplicate Layer button at the bottom of the panel. Now you'll move the thumbnails onto the new layer. 3 Select the four thumbnails by Shift-clicking each image with the Pointer tool. The blue square in the column to the right of Layer 1 in the Layers panel indicates that the selection is on that layer. 4 Drag the blue square that is next to Layer 1 to the new layer, Layer 2. Now you can share Layer 1 across frames so that the text appears in each frame of the animation. 5 Select Layer 1 in the Layers panel. 6 Open the options pop-up menu on the Layers panel (click the triangle at the top of the panel) and choose Share Layer. Notice that a filmstrip icon appears to the right of the layer name to indicate that the layer is shared across frames. 7 Shift-click the thumbnails to select them again. 8 Drag the thumbnails on top of the text and align them over the last four letters in the logo. Next you'll distribute the thumbnails to separate frames to create the animation. 9 Display the Frames panel and click the Distribute to Frames button at the bottom of the panel. 10 Display the Optimize panel and choose Animated GIF from the export file format pop-up menu. You have to use Animated GIF to export all the frames to the file. Using GIF would export only the first frame. 11 Shift-click all the frames in the Frames panel and choose Properties from the options menu on the panel. (Click the triangle at the top of the panel.) 12 Set the frame delay to 50 (which is a half-second) and press Enter (Windows) or Return (Macintosh). The frame delay sets the speed for the animation. 13 Click the Play button at the bottom of the application window (Windows) or the document window (Macintosh). Note that play button changes to a stop button as the animation plays. Click the stop button to stop the animation. 14 Choose File > Save As, name the document my_animation , and click Save. If desired, export the file and test it in a browser. Congratulations on completing the Fireworks tutorial. You're now ready to create your own artwork using Fireworks.
<url>html/02tutorial2.html</url>
<title>Drawing tools</title> Drawing tools Fireworks includes a variety of tools for creating basic geometric shapes, as well as tools for precisely drawing irregular shapes. Draw a rectangle You'll start by drawing a rectangle with the aid of guides. 1 If the guides (bright green lines) are not visible, choose View > Guides. 2 To ensure that the pointer snaps to the guides, choose View > Guide Options > Snap to Guides. 3 Position the pointer over the Rectangle tool in the Toolbox and click to choose it. 4 Position the Rectangle tool near one corner of the rectangle formed by the guides and drag to the opposite corner. Paint the stroke and fill In Fireworks, the color on a line is called a stroke and the color inside an object is called a fill . The current stroke and fill colors appear in color wells in the Toolbox. You can also set stroke and fill colors with the Stroke and Fill panels. 1 With the rectangle still selected, click the triangle next to the fill color well to open the color well pop-up menu. By default, the color pop-up menus display the 216 colors of the Web-safe palette. 2 Move the pointer over the color swatches and note that the hexadecimal value for a color swatch appears at the top of the pop-up menu. Click a swatch to select that color for the fill (we used white). You can also type a hexadecimal color value in the text box at the top of the pop-up menu. 3 If the Stroke panel is not visible, choose Window > Stroke. The Stroke panel lets you choose a variety of stroke settings, including brush size, brush shape, stroke color, and texture. 4 Choose stroke settings. Experiment with different settings to see different effects. We used the settings illustrated below.
<url>html/02tutorial3.html</url>
<title>JavaScript buttons</title> JavaScript buttons Fireworks makes it easy to create interactive buttons without writing a line of JavaScript code. Create one button You'll convert the rectangle into a button and then use the Button Editor to complete the button. 1 With the rectangle still selected, choose Insert > Convert to Symbol. In Fireworks, buttons are a special type of object called symbols that are stored in the document's library. For more information on using symbols and the Library panel, see "Symbols and instances" on page 92 . 2 Type Button in the Name text box, select the Button option, and click OK. Notice that the rectangle appears now to have a a light green fill and a small arrow in the lower left corner. The fill hasn't changed. Rather, the light green represents a slice object. The arrow indicates that the rectangle is an instance of the button. The original artwork for the button is stored in the document's library. 3 Double-click the button to open the Button Editor, or choose Modify > Symbol > Edit Symbol. With the Button Editor, you create the graphics you want for each state of the button. The first change you'll make is to add text for the button's label. 4 Select the Text tool and click near the center of the rectangle in the Button Editor. 5 Choose a font from the font pop-up menu in the Text Editor dialog box, enter a point size, select a color from the color pop-up menu, and click the center alignment button (we used Arial, 14 point, boldface, center aligned). 6 Type our story in the large text box at the bottom of the dialog box and click OK. Now you'll use the Align commands to center the text within the rectangle. 7 With the Pointer tool, select the rectangle and then hold down Shift and click (Shift-click) the text. 8 Choose Modify > Align > Center Vertical and then choose Modify > Align > Center Horizontal. Fireworks moved the text to align it within the rectangle and didn't move the rectangle. The Align commands maintain the position of the first selected object, to which they align subsequently selected objects. 9 Click the Over tab in the Button Editor and click the Copy Up Graphic button. The image in the Over tab is what appears when the pointer passes over the button in the completed Web page. To make this image distinct from the Up state, you'll change the fill color by sampling a color from the image. 10 Use the Pointer tool to select the rectangle. Click the fill color well in the Toolbox, select the dropper, and click the tan rectangle behind the welcome message. The dropper lets you sample any color on the screen. Each button you create should link to an Internet address, such as a URL. 11 Click the Active Area tab in the Button Editor and then click Link Wizard in the lower right corner. 12 Click the Link tab. Enter a URL in the text box at the top of the dialog box. Use a valid URL (such as http://www.macromedia.com) so that you can test the button in a browser. 13 Click OK. 14 Close the Button Editor. Duplicate the button Fireworks makes it easy to create a number of buttons that look similar but have different links and text. 1 Hold down Alt (Windows) or Option (Macintosh) and drag the button down the page. By Alt/Option-dragging you move a copy of a selection. 2 If the Object inspector is not visible, choose Window > Object. 3 In the Button Text text box, type gifts and press Enter (Windows) or Return (Macintosh). A message box appears asking if you want to edit the active instance of the button, or all instances of the button. Because you duplicated the Our Story button, you have two instances of the same button. When you edit a button, Fireworks updates all the instances. In this case, you want to have two distinct buttons, so you'll choose to edit the current button. 4 Click Current. 5 Click the Link Wizard button in the Object inspector. 6 Click the Link tab and change the URL. Use a valid URL so that you can test the button when you preview the page in a browser. 7 Click OK. Notice that the text on the button has been updated.
<url>html/02tutorial4.html</url>
<title>Sophisticated rollovers</title> Sophisticated rollovers In addition to creating buttons, Fireworks makes it easy for you to create sophisticated JavaScript rollover effects. For example, when the pointer passes over a button, in addition to changing the appearance of the button, you can change the appearance of another area of the page. In Fireworks, this type of rollover effect is called a disjoint rollover. 1 If the Layers panel isn't visible, choose Window > Layers. Click Layer 1 to make it the active layer. The changes you are about to make must be to Layer 1. 2 Display the Frames panel (choose Window > Frames if it isn't visible). 3 Click the New / Duplicate Frame button at the bottom of the Frames panel. 4 Click Frame 2 in the Frames panel. Everything except the buttons disappeared because the artwork is in Frame 1. The buttons, however, are on a layer that is shared among all frames. Next, you'll place artwork in Frame 2 that serves as the source of the rollover. You need to turn on onion skinning to help you align the artwork in Frame 2 with the artwork in Frame 1. Onion skinning lets you display dimmed versions of more than one frame at a time. 5 Click in the column to the left of Frame 1 in the Frames panel. Fireworks displays the contents of Frame 1 as if it were on translucent onion skin. To save you time, we've created the artwork you'll use for the rollover. 6 If the Library panel isn't visible, choose Window > Library. The Library panel stores buttons and other artwork that you want to reuse throughout a design. For more information on using the Library panel, see "Symbols and instances" on page 92 . 7 Click Swap Text from the list of items. A preview of the artwork appears in the top of the Library panel. 8 Drag the Swap Text artwork from the preview area in the Library panel and align it over the welcome message text. 9 Make frame 1 active by clicking its name in the Frames panel. 10 Use the Pointer tool to select the tan rectangle behind the welcome message text and choose Insert > Slice. Fireworks inserts a light green, transparent rectangle on top of the image to represent the slice. 11 In the Object inspector (choose Windows > Object if it isn't visible), deselect the Auto-Name slices option and enter text_slice in the text box at the bottom of the panel. Naming slices distinctly helps you to identify the slice images when maintaining and updating a Web site. You'll attach a behavior—prewritten JavaScript code—to the Gifts button that targets this slice as the area to change when the pointer rolls over the button. 12 Select the Gifts button. 13 In the Behaviors inspector (choose Window > Behaviors if it isn't visible), click the button with a plus sign (+) and choose Swap Image from the pop-up menu. The Swap Image dialog box appears. 14 Make sure that text_slice is selected in the list of slices on the left side of the dialog box, and click OK. 15 Click the Hide Hotspots and Slices button in the Toolbox. Click the Preview tab in the workspace and move the pointer over the buttons. Point at the Gifts button and notice that the message to the right changes. The Preview tab displays the image, buttons, and JavaScript behaviors as they'll appear in a Web browser. 16 Click the Original tab and save the image.
<url>html/02tutorial5.html</url>
<title>Live Effects</title> Live Effects Fireworks includes special effects and image adjustment commands that can be used on paths and bitmap images. When you use the Effect panel, effects remain editable after being applied to an object. They can even be removed. 1 Select the Our Story button. 2 Display the Effect panel. You'll apply bevel and drop shadow effects to make the button appear three-dimensional. 3 Click the pop-up menu at the top of the panel and choose Bevel and Emboss > Inner Bevel. Fireworks displays a set of options for setting the bevel. 4 Set the width of the beveled edge to 3 pixels. (You can pause the pointer over each option in the Effect panel and Fireworks displays the name next to the pointer.) 5 Click the pop-up menu at the top of the Effect panel and choose Shadow and Glow > Drop Shadow. 6 Click outside the pop-up menu options to accept the default settings.
<url>html/02tutorial6.html</url>
<title>Automation</title> Automation As you work on a document, Fireworks records the steps you make in the History panel. You can use the History panel to undo steps, reverting the document to a previous state. You can also use the History panel to automate tasks by replaying steps. 1 Select the Gifts button. 2 In the History panel, Shift-click the last two steps, both of which are named Effect. These two steps are the Bevel and Drop Shadow effects that you applied to the Our Story button. 3 Click the Replay button in the History panel. Fireworks applies the Bevel and Drop Shadow effects to the Gifts button.
<url>html/02tutorial7.html</url>
<title>Masks</title> Masks Masks cover objects so that only the unmasked part of the object appears in the document. You'll use the white rectangle to mask the coffee cup image, giving the coffee cup a black border. 1 Use the Pointer tool and drag the white rectangle on top of the coffee cup. 2 Shift-click the coffee cup image so that both the coffee cup and the rectangle are selected. 3 Choose Modify > Mask Group > Mask to Path. The rectangle masks the coffee cup. The small diamond-shaped handle in the center of the coffee cup is the mask handle. 4 Drag the mask handle with the Pointer tool to position the coffee cup inside the mask.
<url>html/02tutorial8.html</url>
<title>Hotspots</title> Hotspots In Fireworks, it's easy to associate an area of image with a URL. Create hotspots when you want to create a link but don't want the interactive states of a button. Creating hotspots is how you create an image map in Fireworks. 1 Select the rectangle containing the "order our" text. Be sure to select the whole rectangle, not just the text. 2 Choose Insert > Hotspot. Fireworks inserts a transparent blue rectangle to represent the hotspot. 3 Enter a URL in the text box at the top of the Object inspector. Notice that the Object inspector displays in the title bar the type of selected object.
<url>html/02tutorial9.html</url>
<title>Image optimization</title> Image optimization Fireworks lets you optimize different parts of a document individually. Each document has a default optimization setting, but you can optimize individual areas in a document by using slices. For example, most of the document you are working on can be optimized as a GIF file, but the coffee cup image will display better if optimized as a JPEG file. First, confirm the optimization settings for the document. These settings are used for any part of the image that is not underneath a slice object. 1 Deselect all objects by choosing Edit > Deselect. 2 Display the Optimize panel. Notice that the title bar of the panel shows the settings for the active selection. In this case, because nothing is selected, it displays the setting for the document. 3 Make sure that GIF WebSnap 128 is the selection in the Settings pop-up menu at the top of the panel. You can use the options at the bottom of the panel to customize the selected optimization settings. For more information on the optimization settings, see Chapter 11, "Optimizing Graphics." Now you'll create a slice over the coffee cup. 4 Use the Pointer tool to select the coffee cup image and choose Insert > Slice. Fireworks creates a slice object that is the same size as the selected object. 5 Choose JPEG - Smaller File from the Settings pop-up menu at the top of the Optimize panel. 6 Click the 2-Up tab at the top of the workspace. If necessary, select the Hand tool and drag in the left pane so that you see the coffee cup. Fireworks displays two versions of the document. In the left pane is the original image and in the right pane is the optimized version. When you make changes to the original image, Fireworks updates the optimized image. If Web objects (hotspots and slices) are displayed, selecting a slice on the left will dim the rest of the image, letting you focus on optimizing the selected slice. 7 With the coffee cup slice selected, make changes to the optimization settings in the Optimize panel and notice how these changes can change the image on the right. 8 Save the file.
<url>html/03Workspace1.html</url>
<title>Overview: Fireworks basics</title> Overview: Fireworks basics You can get acquainted with the concepts behind Fireworks by taking a quick tour around the Fireworks workspace. This chapter contains a list of Web site features that you can create in Fireworks, including some you may not have known Fireworks can do.
<url>html/03Workspace10.html</url>
<title>Using panels and inspectors</title> Using panels and inspectors Many Fireworks controls are accessible in the workspace on floating, dockable panels and inspectors. The options on an inspector typically control the characteristics of selected objects. The options on a panel typically control document or tool characteristics. You can organize your work environment by combining individual panels and inspectors on tabbed panels. Likewise, you can separate a panel or inspector from a tabbed panel to place it in a convenient spot in your workspace. To show or hide a panel or inspector: Choose the panel or inspector from the Window menu. Most panels and inspectors have an Options pop-up menu. To choose an option from a panel or inspector Options pop-up menu: 1 Click the right-arrow button near the top-right corner of the panel or inspector. The Options pop-up menu appears. 2 Choose an Options pop-up menu command. Some data boxes on panels and inspectors have a pop-up menu, swatch panel, slider, or dial. To use an option pop-up menu: 1 Click the down arrow next to the box. 2 Change the value: Choose an option or color swatch. Drag the slider or dial. (Windows) Type the first letter of the option you want to choose. Press the letter repeatedly to cycle through all options beginning with that letter. To enter information in a panel or inspector text box: 1 Click the pointer in the text box to display an insertion point. 2 Type a value. 3 Press Enter. To combine two or more panels or inspectors: 1 Drag one floating panel or inspector over another floating panel or inspector. When the highlighted border appears on the panel underneath, release the mouse button. 2 Click any tab in the window to bring it forward. To remove a panel or inspector from a tabbed panel: Drag the panel or inspector away from the tabbed panel by its tab. To hide a panel or a tabbed panel group: Click the close box at the top of the panel or panel group window. To hide all panels: Choose View > Hide Panels. Press the Tab key. To view hidden panels: Choose View > Hide Panels. Press the Tab key. Panels that were hidden when you chose Hide Panels will remain hidden when you deselect Hide Panels. To return panels to their default positions and reset application-level preferences: 1 Quit Fireworks. 2 Delete the preferences file named Fireworks 3 Preferences: In Windows, this file is located in the Fireworks folder. On the Macintosh, this file is located in the System\Preferences folder. 3 Relaunch Fireworks.
<url>html/03Workspace11.html</url>
<title>Attaching behaviors to Web objects</title> Attaching behaviors to Web objects JavaScript code is the magic behind Web graphics that change appearance according to mouse movement. The Behaviors inspector is where you attach JavaScript behaviors to Web objects, which are the objects in Fireworks that define hotspots and slices. You can also view and modify behaviors that are already attached to Web objects. To display the Behaviors inspector: Choose Window > Behaviors. For more information about behaviors, see Assigning rollover behaviors .
<url>html/03Workspace12.html</url>
<title>Changing and repeating a document's history</title> Changing and repeating a document's history With the History panel, you can view, change, and repeat the history of your document. The History panel lists the most recent actions you have performed in Fireworks, up to the number specified in the Number of Undo's Preference. Quickly undo and redo recent commands using the History panel Undo Marker. Choose recently performed commands from the History panel and click Replay to repeat them. Save a group of recently performed commands as a custom command, and then choose it from the Command menu to reuse the group as a single command. To undo and redo commands: 1 Choose Window > History to open the History panel. 2 Drag the marker up or down with the pointer. To repeat commands: 1 If the commands are to affect objects, select the objects. 2 Highlight the commands to be repeated. Hold down Shift while clicking to highlight a continuous range of commands. 3 Click the Replay button at the bottom of the History panel. To save commands for reuse: 1 Highlight the commands to be saved. 2 Open the Save Command dialog box: Click the Save button at the bottom of the History panel. Choose Save as Command from the Options pop-up menu. 3 Enter the command name and click OK to add the name to the Modify > Command submenu. To use the saved custom command: Choose the command name from the Command menu. For more information about creating commands using the History panel, see Scripting .
<url>html/03Workspace13.html</url>
<title>Building JavaScript rollover buttons</title> Building JavaScript rollover buttons In the Button Editor, you can build two-, three-, or four-state JavaScript rollovers or navigation bars. A multi-tab window opens when you choose Insert > New Button: Button Editor window The first four panels—Up, Over, Down, and Over while Down—are where you create a graphic for each button state. The fifth panel—Active Area—is where you can edit the slice and create hotspots for the button. The buttons you make in the Button Editor window—button symbols—have several unique features that help you as you work with buttons as graphic elements. For more information, see What is a button?
<url>html/03Workspace14.html</url>
<title>Using context menus</title> Using context menus Context menus contain commands that pertain to the current selection. To use a context menu: 1 Open the menu: In Windows, right-click the object. On the Macintosh, Control-click the object. 2 Choose a command.
<url>html/03Workspace15.html</url>
<title>Setting preferences</title> Setting preferences Fireworks preference settings control the general appearance of the user interface, as well as editing and folder aspects. Setting general preferences The number of undo steps, color defaults, and the Photoshop conversion method are General preferences. Undo Steps sets the number of undo/redo steps from 0 to 100. This setting applies to both the Edit > Undo command and the History panel. A large number of undos can increase the amount of memory Fireworks requires. For information about using the History panel to undo and redo steps, see Changing and repeating a document's history . Color Defaults set the default colors for brush strokes, fills, and highlight paths. Interpolation chooses one of four different scaling methods that Fireworks can use to interpolate pixels when images are scaled: Bicubic interpolation gives the sharpest and highest quality most of the time, and is the default scaling method. Bilinear interpolation gives sharper results than soft interpolation, but not as sharp as Bicubic. Soft interpolation, which was used in Fireworks 1, gives a soft blur and eliminates sharp details. It is useful when other methods of scaling produce unwanted artifacts. Nearest Neighbor interpolation results in jagged edges and sharp contrasts with no blurring. The effect is similar to zooming in or out on an image with the Magnify tool.
<url>html/03Workspace16.html</url>
<title>Setting editing preferences</title> Setting editing preferences The Editing preferences control pointer appearance and visual cues for image edit mode. Also, you can set whether the Fireworks source PNG opens when you edit and optimize from Dreamweaver. Precise cursors replaces tool icon pointers with the crosshair pointer. Delete Objects when Cropping permanently deletes pixels or objects that are outside the bounding box of a selection when you choose Edit > Crop Document or Modify > Canvas Size. Expand to Fill Document expands the striped border to surround the entire canvas of a document when you switch to image edit mode, allowing pixel editing within the entire document. When deselected, only the pixels within a selected image object's border is editable. Open in Image Edit Mode opens image files directly in image edit mode. Deselect to open all files in object mode. Turn Off "Hide Edges" automatically disables Hide Edges when entering or leaving image edit mode. When Editing from External Application determines whether the original Fireworks PNG opens when you use Fireworks to edit images from within Dreamweaver or another HTML editor. When Optimizing from External Application determines whether the original Fireworks PNG opens when you optimize a graphic using the Optimize Image in Fireworks command in Dreamweaver.
<url>html/03Workspace17.html</url>
<title>Managing external folders and scratch disks</title> Managing external folders and scratch disks The preferences in the Folders panel give you access to additional Photoshop plug-ins, texture files, and pattern files from external sources. Also, you can specify where you want Fireworks to store temporary cache files. Additional Materials (Photoshop Plug-Ins, Textures, and Patterns ) target folders containing plug-ins, textures, and patterns. The folders can be in another folder, on a CD-ROM or other external drive, or on a network volume. Photoshop plug-ins appear in the Fireworks Xtras menu. Textures or patterns stored as PNG files appear as options in the Pattern and Texture pop-up menus in the Fill panel. See Using filters and plug-ins and Using Photoshop plug-ins as Live Effects . For more information about textures and patterns, see Chapter 4, "Drawing Objects." Scratch Disks (Primary and Secondary) specify where Fireworks will store temporary cache files, which can sometimes grow very large. If you have more than one hard disk in your computer, target the disk with the most free space as your primary scratch disk. Specify a secondary hard disk in case the primary disk runs out of free space.
<url>html/03Workspace18.html</url>
<title>Setting Photoshop file import preferences</title> Setting Photoshop file import preferences The preferences in the Import panel manage several file-conversion issues for importing Photoshop files. The Photoshop File Options dialog box, which opens when you import a Photoshop file, has the same options. For more information on the options on the Import panel, see Opening Photoshop files .
<url>html/03Workspace2.html</url>
<title>What is Fireworks?</title> What is Fireworks? The advent of Fireworks freed Web designers from having to jump back and forth among as many as a dozen task-specific applications. Its non-destructive Live Effects eliminate the frustration of having to recreate Web graphics from scratch after any simple edit. Fireworks generates JavaScript, making rollovers easy to create. Its optimization features shrink the file size of Web graphics without sacrificing quality. Here are some of the things you can do in Fireworks: You can create graphics using some of the best features of both vector and bitmap graphic applications in a single application. You can edit with vector-object flexibility and apply bitmap effects—including bevels, glows, drop shadows, and now Photoshop filters—that redraw as you edit. You can optimize Web graphics in Fireworks to minimize file size, resulting in fast-loading Web sites. In Fireworks you can add interactivity to your Web graphics to create image maps, JavaScript rollover buttons, animated banner ads, and even entire Web pages. You can save lots of time throughout the Web design process with batch processing, saveable styles and export settings, optimization in the workspace, command-sequence scripting, and compatibility with Macromedia Dreamweaver and other Web design software. Fireworks is primarily a design application for screen graphics. However, with the ability to export to applications such as FreeHand and Illustrator, you can reuse graphics designed in Fireworks for print purposes.
<url>html/03Workspace3.html</url>
<title>Enhancing your Web site with Fireworks</title> Enhancing your Web site with Fireworks Fireworks may have been introduced to you as a graphic optimizer or as a button and image map maker. This section highlights some things you can do with Fireworks that you may not have known. Web art An extensive collection of artistic tools and effects, color control, and optimization capability make Fireworks a great application for creating logos and other images. Optimized images Before uploading photographs or any form of illustration to your Web site, run them through Fireworks optimization to make them as small as possible without sacrificing quality. The 2-Up preview compares a JPEG optimized at 100 percent quality and 60 percent quality. Thumbnails If you have a lot of pictures to put on your Web site, consider creating thumbnails with hotspots that open the full-size pictures when clicked. For more information, see Creating Thumbnails on the Fireworks Support Center. Animated banner ads Use frames, symbols, and optimization to build compact, animated GIF or Flash banner ads. Image maps Turn a graphic into an interactive map to navigate your Web site. Place hotspots on areas of the graphic that people are likely to click, and assign URLs to them. Buttons and JavaScript rollovers Create buttons that trigger events on your Web page. Emphasize interactivity with JavaScript rollovers that change appearance according to the current button state. JavaScript navigation bars Create an entire group of JavaScript buttons as a single graphic, then use slices to export it as a group of smaller graphics with unique URLs. Disjoint rollovers Create rollovers that trigger a change on another part of the Web page. For example, clicking a button on a navigation bar could replace one graphic with another. When you move the pointer over the button, the button and the text area change appearance. Complete Web pages Create an entire Web page in Fireworks. Create a navigation bar, banner ad, JPEG pictures, and GIF art. Then slice up the page into separate regions that you can optimize efficiently. Upon export, Fireworks writes the HTML code that puts the page back together in a browser.
<url>html/03Workspace4.html</url>
<title>Introducing the Fireworks workspace</title> Introducing the Fireworks workspace Opening Fireworks 3 displays command menus across the top of the window, the Toolbox on the left side of the screen, and several multi-tab panels on the right side of the screen. Opening a document places a document window in the middle. You are likely to use these Fireworks components frequently: The Original document window displays the current Fireworks PNG document. With Preview, 2-Up, and 4-Up windows and the Optimize and Color Table panels, you can optimize in the workspace. The previews display how the graphic would appear in a browser, so you can compare the same graphic optimized up to four ways. View and adjust optimization settings using the Optimize panel and the Color Table panel. The Toolbox contains the selection, drawing, and editing tools; the Magnify tool; the Hotspot tool; the Slice tool; and stroke and fill color controls. The Object, Stroke, Fill, and Effect inspectors control a wide range of characteristics of selected objects. The Color Mixer, Swatches panel, and Color Table panel manage the current document's color palette. The Layers and Frames panels organize a document's structure and contain options for creating, deleting, and manipulating layers and frames. The Frames panel contains options for creating animation. The Behaviors inspector manages behaviors, which determine what happens when hotspots or slices respond to mouse movement. The History panel lists recent commands that you can quickly undo and redo. You also can choose commands to repeat, and save command sequences to reuse as a single command. The Button Editor helps you make quick work of building JavaScript rollover buttons and navigation bars. Context menus give you quick access to commands pertaining to the current selection. The Library panel contains graphic symbols and button symbols. You can easily drag instances from the Library onto your document.
<url>html/03Workspace5.html</url>
<title>Displaying a Fireworks document</title> Displaying a Fireworks document The Original document window displays the current Fireworks PNG document. The title bar displays the document name and the current magnification percentage. The Original tab and three preview tabs are at the top-right corner of the workspace. To display the original PNG document: Click the Original tab in the document window.
<url>html/03Workspace6.html</url>
<title>Optimizing in the workspace</title> Optimizing in the workspace The Preview view displays the graphic as it would appear in a Web browser, based on current export settings. 2-Up and 4-Up views compare export previews based on various export settings. In 2-Up and 4-Up views, you can compare optimized versions to the original document. To display an export preview: Click the Preview, 2-Up, or 4-Up tab in the document window. Use the Optimize panel and Color Table panel to change export settings. These panels and the Preview replicate the Export Preview dialog box in previous versions of Fireworks, bringing optimization into the workspace. You can preview rollover and navigation behaviors, as well as animation, in the Preview view. For more information on optimizing and exporting graphics in Fireworks, see Optimizing in the workspace and Exporting an image .
<url>html/03Workspace7.html</url>
<title>Displaying and choosing tools</title> Displaying and choosing tools The Toolbox contains the tools you use to create, select, and edit objects. In Windows, the Main, Modify, and View Controls toolbars provide easy access to various commands. Macintosh users can choose these commands from menus. The Toolbox contains 37 tools, some of which are contained in tool groups, as shown. Click a tool to choose it. Alternatively, press shortcut keys to switch quickly from one tool to another. For more information about shortcut keys, see Appendix A. The function of some tools changes depending on whether you are editing objects or pixels. For more information on Fireworks tools, see Choosing drawing and editing tools . To choose an alternate tool from a tool group: 1 Click and hold any tool that has a triangle in the lower right corner. 2 Drag the pointer over the tool you want and release the mouse button. The tool you chose appears in the Toolbox.
<url>html/03Workspace8.html</url>
<title>Rearranging toolbars (Windows only)</title> Rearranging toolbars (Windows only) You can show and hide toolbars, undock them, or move them to the top, bottom, or sides of your document. To show or hide the Toolbox or a toolbar: Choose Window > Toolbox or choose a toolbar from the Window > Toolbars submenu. If the Toolbox or a toolbar is undocked, you can click the Close button at the top right of the title bar. To undock the Toolbox or a toolbar: 1 Move the current tool onto an area between tool buttons. The tool changes to the Pointer tool. 2 Drag the Toolbox or toolbar away from its docked location. The Toolbox or toolbar becomes a floating panel. To dock the Toolbox or a toolbar: 1 Move the current tool onto the title bar. 2 Drag the Toolbox or toolbar onto a docking area anywhere along the application window's perimeter.
<url>html/03Workspace9.html</url>
<title>Changing tool options</title> Changing tool options The tool Options panel displays options related to the active tool. For example, the Pointer tool options include Mouse Highlight and Preview Drag. To show or hide the tool Options panel: Double-click a tool in the Toolbox. Choose Window > Tool Options. For information about specific tool options, see the sections throughout the manual that introduce various tools.
<url>html/04Docs1.html</url>
<title>Overview: Creating and importing documents</title> Overview: Creating and importing documents When you choose File > New to create a new document in Fireworks, a Portable Network Graphic, or PNG, is the type of document you create. PNG is the native file format for Fireworks. After you create Web graphics in Fireworks, you can export them as other familiar Web graphic formats, such as JPEG, GIF, and animated GIF. When you export a graphic in another file format, the original Fireworks PNG file remains unchanged, so you can use it again and again. While your PNG document is open, you can zoom in and zoom out on graphics. You can change the size and resolution of the document. You can also rotate the canvas to right an upside-down or sideways imported image. Switching the Gamma view shows you what your graphic would look like on either Macintosh or Windows monitors. You can import Photoshop, FreeHand, Illustrator, uncompressed CorelDRAW, and animated GIF files. In addition, you can import images from a digital camera or scanner. Regardless of the imported image format, you can export them as other file formats.
<url>html/04Docs10.html</url>
<title>Creating Fireworks documents by importing</title> Creating Fireworks documents by importing With Fireworks, you can import several file formats, including Photoshop, FreeHand, Illustrator, uncompressed CorelDRAW, and animated GIF files. When you import a file format other than PNG using File > Open, a new Fireworks document is created. While the new document is a PNG file, the original file remains unchanged. For information on importing graphics as image objects into an open Fireworks document, see Including imported images in a document . Opening Fireworks 1 files In Fireworks 1, the background layer is a permanent image stretching across the entire canvas, under which no objects or layers can be placed. Fireworks 3 documents do not have a permanent background layer. When opening Fireworks 1 documents in Fireworks 3, the background layer from the Fireworks 1 document is converted into an image object and is placed as a shared layer on the bottom of the document. Also, the URL overlay in the Fireworks 1 document is converted to the Web Layer. For more information about layers, see Creating and arranging layers .
<url>html/04Docs11.html</url>
<title>Opening Photoshop files</title> Opening Photoshop files When you open a Photoshop file in Fireworks, text layers remain fully editable. By default, the layers are not shared across frames. You can adjust this at the time of import. In Windows, Photoshop file names must include a PSD extension for Fireworks to recognize the Photoshop file type. To open Photoshop files: 1 Choose File > Open. 2 Choose the file and click Open. The Photoshop File Options dialog box opens. 3 Choose the appropriate options in the Photoshop File Options dialog box: Maintain Layers maintains the layer structure of the imported file. Make Shared Layers lets you share layers across frames. Convert to Frames places each layer of the imported document into a separate frame. Editable imports text as text blocks so you can edit them. The text may change in appearance if the appropriate fonts are not available. For more information, see Handling missing fonts . Maintain Appearance rasterizes text objects and imports them as a bitmap image. This is useful if your computer does not have the correct fonts installed but you want the text to maintain its appearance upon import. Use Flat Composite Image ignores all objects and imports a single flat composite image, if a composite image is saved in the Photoshop file. The Photoshop File Options dialog box settings are identical to the import settings in the Import panel in the Preferences dialog box.
<url>html/04Docs12.html</url>
<title>Opening FreeHand, Illustrator, or CorelDRAW files</title> Opening FreeHand, Illustrator, or CorelDRAW files You can open a vector drawing from FreeHand, Illustrator, or CorelDRAW, and then apply Fireworks edits such as brush strokes and textured fills to the drawing. Fireworks can import uncompressed CDR files created with CorelDRAW 7 or 8 for Windows. Fireworks cannot open or import CMX files or compressed CDR files. Because CorelDRAW supports a different set of features than Fireworks, these changes occur when importing CDR files: Master page contents are repeated in each Fireworks frame. Only the two end objects of a CorelDRAW blend are imported. The objects are grouped after import. Dimensions convert to vector objects. Basic text is imported. Most character and paragraph parameters are unsupported. Colors are generally converted to RGB, if possible. To open FreeHand, Illustrator, or CorelDRAW files: 1 Choose File > Open. The Vector File Options dialog box opens. 2 Choose the appropriate options in the Vector File Options dialog box: Scale specifies the scale percentage for the imported file. Width and Height specifies in pixels the width and height of the imported file. Resolution specifies the resolution of the imported file. File Conversion specifies how multipage documents are handled when imported: Open a Page imports only the specified page. Open Pages as Frames imports all the pages from the document, and places each in a separate frame. Remember Layers maintains the layer structure of the imported file. Convert Layers to Frames places each layer of the imported document into a separate frame. Include Invisible Layers imports objects on layers that have been turned off. Otherwise, invisible layers are ignored. Include Background Layers imports objects from the document's background layer. Otherwise, the background layer is ignored. Render as Images rasterizes complex groups, blends, or tiled fills and places each as a single image object in a Fireworks document. Enter a number in the text box to determine how many objects a group, blend, or tiled fill can contain before it is rasterized during import. Anti-Aliased smooths imported objects to avoid jagged edges. Note: To change selected objects to Anti-Alias or Hard Edge, use Modify > Path Edge after importing.
<url>html/04Docs13.html</url>
<title>Opening animated GIFs</title> Opening animated GIFs When opening an animated GIF, Fireworks does these things: It places each frame of the animated GIF in a separate frame. It creates a background layer based on the common pixels found in all the imported frames. The image on the background layer is shared across all frames. So, if you change the image, it changes in all frames.
<url>html/04Docs14.html</url>
<title>Importing from a scanner or digital camera</title> Importing from a scanner or digital camera To import images from scanners or digital cameras, use TWAIN modules or Photoshop Acquire plug-ins (Macintosh). Images imported into Fireworks from a scanner or digital camera open as new documents. On the Macintosh, to use Photoshop Acquire plug-ins in Fireworks, you must do one of these things during or after installation: Install the Photoshop Acquire plug-in in the Fireworks 3\Settings\Xtras folder. Install the Photoshop Acquire plug-in in the Photoshop Plug-ins folder or in another folder. In Fireworks, choose File > Preferences, click the Folders tab, and choose Photoshop Plug-Ins. Then click the Browse button, and navigate to the folder containing the Photoshop plug-ins. To import an image from a scanner or digital camera: 1 Connect the scanner or camera to your computer. 2 Install the software that accompanies the scanner or camera. 3 In Fireworks, choose File > Scan and choose a TWAIN module or Photoshop Acquire plug-in that corresponds to the device from which you are importing an image. For most TWAIN modules or acquire plug-ins, additional dialog boxes prompt you to set options for the module or plug-in. 4 Follow instructions and apply settings. The imported image is opened as a new Fireworks document. Note: Fireworks cannot scan images unless the appropriate software drivers, modules, and plug-ins have been installed. For specific instructions about installation, settings, and options, consult your documentation for the TWAIN module or acquire plug-in.
<url>html/04Docs2.html</url>
<title>Setting up a new document</title> Setting up a new document To create a Web graphic in Fireworks, you must first set up a new document or open an existing document. You can change document characteristics later, but it is more efficient to plan ahead as much as possible. If you want to base the size of a new document on another graphic, you can copy the graphic to the Clipboard before you create the document. To create a new document: 1 Choose File > New. The New Document dialog box opens. 2 Enter the canvas width and height measurements in pixels, inches, or centimeters. Any graphic you create must be able to fit inside the canvas. 3 Enter a resolution in pixels per inch or pixels per centimeter. 4 Choose white, transparent, or a custom color for the canvas. Use the Custom color well pop-up menu in the dialog box to choose a custom canvas color. Note: The canvas color is visible if no background color or texture is specified on a Web page. 5 Click OK to open the new document and begin. To create a new document with the same dimensions as an object on the Clipboard: 1 Copy the object to the Clipboard from another file in Fireworks or any of several other applications, including a Web browser. 2 Choose File > New. The New Document dialog box opens with the width and height dimensions of the object on the Clipboard. 3 Set resolution and canvas color and click OK. 4 Choose Edit > Paste to paste the object from the Clipboard into the new document.
<url>html/04Docs3.html</url>
<title>Navigating and viewing the document</title> Navigating and viewing the document You can control your document's magnification, the number of views, and the display mode. In addition, you can pan the view of a document easily. This is helpful if you zoom in and can no longer see the entire graphic. Setting document magnification The range of magnification in Fireworks is from 6% to 6400%. The Magnify pop-up menu in the View Controls toolbar, and the Magnify tool and Hand tool in the Toolbox. To zoom in on a document: Choose the Magnify tool and click inside a document window where you want the new centerpoint. Choose a magnification setting from the Magnify pop-up menu. Choose View > Magnification and choose a magnification option. To zoom out on a document: Choose the Magnify tool, hold down Alt (Windows) or Option (Macintosh), and click in a document. Choose a magnification setting from the Magnify pop-up menu. Choose View > Magnification and choose a magnification option. To zoom in on a specific area: Drag a selection area with the Magnify tool. To zoom out based on a selection area: Hold down Alt (Windows) or Option (Macintosh) and drag a selection area with the Magnify tool. To return to 100% magnification: Double-click the Magnify tool in the Toolbox. To pan around your document: 1 Choose the Hand tool. The Hand cursor appears. 2 Press and hold down the mouse button and drag the Hand cursor.
<url>html/04Docs4.html</url>
<title>Multiple document views</title> Multiple document views Use multiple views to see one document at different magnifications simultaneously. To open an additional document view: Choose Window > New Window. To tile document views: Choose Window > Tile Horizontal or Window > Tile Vertical. To close a document view window: Click the window's close box.
<url>html/04Docs5.html</url>
<title>Controlling document redraw</title> Controlling document redraw Display modes affect a document's on-screen representation, but not its object data or output quality. Full Display mode displays the document in all available colors with full detail. Draft Display mode displays paths as 1 pixel wide with no fill and displays images with an X through them. Macintosh Gamma (Windows) or Windows Gamma (Macintosh) modifies Full Display to show how a graphic looks on another computer platform. When working on the Windows platform, you can view how a graphic looks on the Macintosh platform and vice versa by using this command. Note: In Draft Display mode, selected objects appear in full detail. To switch to another display mode: Choose it from the View menu. Choose it from the display mode pop-up menu in the View Controls toolbar (Windows) or in the lower left corner of the document window (Macintosh).
<url>html/04Docs6.html</url>
<title>Changing document size, color, and resolution</title> Changing document size, color, and resolution After you create a document, you can still go back and change the canvas size, canvas color, and image resolution characteristics. To change canvas size: 1 Choose Modify > Canvas Size. 2 Click an Anchor button to specify which sides of the canvas Fireworks will add to or delete from, and click OK. To change canvas color: Choose Modify > Canvas Color. To resize an image in Fireworks: 1 Choose Modify > Image Size. The Image Size dialog box opens. 2 Enter new horizontal and vertical dimensions in the Pixel Dimensions text boxes. If Resample Image is deselected, you can change the Resolution or Print Size, but not Pixel Dimensions. 3 Enter horizontal and vertical dimensions for the image size for printing in the Print Size text boxes. 4 Enter a new resolution for the image in the Resolution text box. If you chose Resample Image, changing the Resolution also changes the Pixel Dimensions. 5 To maintain the same ratio between the document's horizontal and vertical dimensions, choose Constrain Proportions. Deselect Constrain Proportions to resize width and height independently. 6 Choose Resample Image to add or remove pixels when resizing the image to approximate the same appearance at a different size. 7 Click OK.
<url>html/04Docs7.html</url>
<title>Choosing a resampling method</title> Choosing a resampling method Resizing bitmap images always presents a unique problem—do you add or remove pixels to resize the image, or do you change the number of pixels per inch or centimeter? You can adjust the size of a pixelated image in these ways: Adjust the resolution, which changes the size of the pixels in the image so that more or fewer pixels fit in a given space. Resample the image. When you resample an image, pixels must be added or removed to make the bitmap larger or smaller. Either way, the image is altered, which can result in some quality loss at the target resolution. Downsampling, or removing pixels to make the image smaller, always causes quality loss because pixels are discarded to resize the image. Resampling up, or adding pixels to make the image larger, may result in quality loss because some pixels are being added to make the image larger, and the pixels that are added do not always correspond pixel-for-pixel to the original image. Original and after downsampling an image
<url>html/04Docs8.html</url>
<title>Resampling in Fireworks</title> Resampling in Fireworks Resampling in Fireworks differs from most image editing applications. Fireworks contains pixel-based bitmap image objects and vector-based path objects. When an image object is resampled, pixels are added to or removed from the image object to make it larger or smaller. When a path object is resampled, little quality loss occurs because the path is redrawn mathematically at a larger or smaller size. However, since the attributes of path objects in Fireworks are actually pixels, some strokes or fills may appear slightly different after resampling because the pixels that compose the stroke or fill must be redrawn. Note: Guides, hotspot objects, and slice objects are resized when an image is resized.
<url>html/04Docs9.html</url>
<title>Rotating and trimming the canvas</title> Rotating and trimming the canvas Fireworks lets you rotate and trim the canvas easily. Trimming the canvas removes extra empty space around an image. Rotating the canvas Rotating the canvas is helpful when an imported image is upside-down or sideways. You can rotate the canvas 180 degrees, 90 degrees clockwise, or 90 degrees counterclockwise. When you rotate the canvas, all objects in the document rotate. Original and rotated 180 degrees To rotate the canvas: 1 Choose Modify > Rotate Canvas. 2 Choose a rotation option. Trimming the canvas If your document contains extra empty space around an image, you can trim the canvas easily. Original Trimmed canvas To trim the canvas: Choose Modify > Trim Canvas to automatically remove excess pixels from around the edge of the document. The canvas is cropped to the outermost edge of all pixels in the document. If the document has more than one frame, Trim Canvas crops to include all objects in all frames, not just the current frame.
<url>html/05Drawing1.html</url>
<title>Overview: Drawing objects</title> Overview: Drawing objects Generally, a computer graphic is either a vector drawing or a bitmap image. Applications such as Macromedia FreeHand create vector drawings. Applications such as Photoshop create bitmap images. Paths and points are the basic elements of vector graphics. As you draw, the vector path and its points are generated automatically. When magnified, a vector graphic looks the same, only bigger. In contrast, a bitmap image is a matrix of pixels that forms an image, like the tiles of a mosaic. A bitmap image becomes more granulated, and ultimately unrecognizable, as magnification reveals the individual pixels. Fireworks blurs the distinction between vector graphics and bitmap image graphics. Objects drawn in Fireworks have editable vector paths, yet magnifying a Fireworks object reveals pixels, which redraw in response to vector editing. With the Fireworks Pen tool, you can draw editable bitmap images as if you were drawing vector paths in FreeHand or Illustrator. When you draw in Fireworks, you can use vector or bitmap drawing tools to create bitmap graphics. No matter which drawing tool you use, Fireworks objects give you a level of drawing and editing control previously available only in vector graphic applications, and Fireworks object attributes give you a level of artistic control previously available only in bitmap graphic applications. This chapter focuses on drawing path objects in the default mode, known as object mode. You can also draw, paint, and edit pixels using traditional bitmap techniques in Fireworks, in what is known as image edit mode. For more information, see Editing pixels .
<url>html/05Drawing10.html</url>
<title>Painting and drawing freeform paths</title> Painting and drawing freeform paths To draw a freeform path, use the Brush or Pencil tool. With the Fireworks Brush and Pencil tools, you can paint or draw as if you are using a traditional bitmap graphics application, but the objects you draw are editable because they are path objects. Brush tool and Pencil tool The Brush tool paints freeform brush strokes, and the Pencil tool draws 1-pixel pencil strokes. Brush stroke and pencil stroke Note: You can also use the Brush tool and Pencil tool to draw and edit in image edit mode. For information, see Editing pixels with the pencil or brush tool . To paint paths or draw pencil strokes: 1 Choose the Brush or Pencil tool. 2 Hold down the mouse button and drag to draw a freeform path. Note: To constrain the path to a horizontal or vertical line, hold down Shift while dragging. 3 End the path: To leave the path open, release the mouse button wherever you want the path to end. To close the path, release the mouse button on the starting point when a solid square appears next to the pointer.
<url>html/05Drawing11.html</url>
<title>Drawing freeform paths by plotting points</title> Drawing freeform paths by plotting points You can draw a path segment by segment by plotting its points. You can draw either straight or curved line segments. The same path can contain both straight and curved segments. Draw paths by plotting point by point. Use the Pen tool to draw paths by plotting points. The Pen tool works like those in FreeHand and Illustrator. Pen tool To draw a path point by point: 1 Choose the Pen tool. 2 Click to plot points: To draw straight segments, click to plot each point. To draw curved segments, press and hold the mouse button on a point, and then drag. 3 End the path: To leave the path open, double-click the last point. To create a closed path, click the starting point when a solid square appears next to the pointer. To resume drawing an existing open path: 1 Choose either the Pen tool or the Redraw Path tool. 2 Click the ending point and continue the path. For details on editing paths, see Reshaping paths by editing points .
<url>html/05Drawing12.html</url>
<title>Changing the stroke of the drawing tools</title> Changing the stroke of the drawing tools You can change the stroke attributes of the Pen, Pencil, and Brush tools so that the next object that you draw will have the new stroke attributes. The current stroke color appears in the stroke color well in the Toolbox. Use the Toolbox to change a drawing tool's stroke. The paint brush indicates the stroke color well in the Toolbox. You can also change the stroke color for a drawing tool in the Stroke panel. You can choose from a variety of brush tips and tip sizes. Further, you can change the stroke characteristics of an object after you draw it. For more information, see Editing strokes . To change the stroke color of the drawing tools: 1 From the stroke color well in the Toolbox, click the down arrow next to the color well to open the color well pop-up menu. 2 Choose a color for the stroke from the set of swatches. 3 Choose a drawing tool. 4 Hold down the mouse button and drag to draw the object.
<url>html/05Drawing13.html</url>
<title>Changing the fill of the drawing tools</title> Changing the fill of the drawing tools You can change the fill attributes of the Rectangle, Ellipse, and Polygon drawing tools so that the next object of these types that you draw will have the new fill attributes. You can draw objects with solid, gradient, or pattern fills. The current fill color appears in the fill color well in the Toolbox. Use the Toolbox to change a drawing tool's fill. The paint bucket indicates the fill color well in the Toolbox. You can also change the fill color for a drawing tool in the Fill panel. You can choose from a variety of gradient and pattern fills. Further, you can change the fill characteristics of an object after you draw it. For information, see Editing fills . To change the fill color of the basic shape tools: 1 From the fill color well in the Toolbox, click the down arrow next to the color well to open the color well pop-up menu. 2 Choose a color for the fill from the set of swatches. 3 Choose the Rectangle, Ellipse, or Polygon tool. 4 Hold down the mouse button and drag to draw the object. Note: Each object you draw using the Brush, Pencil, or Pen tool appears with no fill. You must add the fill after you draw the object.
<url>html/05Drawing14.html</url>
<title>Including imported images in a document</title> Including imported images in a document You can import, drag and drop, or copy and paste objects, images, or text drawn in other applications, as well as images from a digital camera or scanner, into a Fireworks document.
<url>html/05Drawing15.html</url>
<title>Dragging and dropping</title> Dragging and dropping You can drag and drop objects, images, or text into Fireworks from any application that supports drag and drop: FreeHand 7 or later Flash 3 or later Photoshop 4 or later Illustrator 7 or later Microsoft Office 97 or later Microsoft Internet Explorer 3 or later Netscape Navigator 3 or later CorelDRAW 7 or later To drag and drop into Fireworks: 1 Select a graphic in another application and drag it over an open Fireworks document. 2 Position the pointer over the Fireworks document, and release the mouse button.
<url>html/05Drawing16.html</url>
<title>Pasting into Fireworks</title> Pasting into Fireworks You can copy and paste any of these formats from the Clipboard: FreeHand 7 or later Illustrator PNG PICT (Macintosh) DIB (Windows) BMP (Windows) ASCII text When you paste an object copied from another application into Fireworks, the object is centered in the active document. Each edit mode handles pasted data differently: In object mode, pasting a pixel selection yields a rectangular image object, which uses alpha transparency to maintain the appearance of the selection. Vector objects retain vector attributes. In image edit mode, pasting a vector graphic or image object pastes a pixel selection that remains floating until it is deselected. When deselected, the selection becomes part of the current image.
<url>html/05Drawing17.html</url>
<title>Resampling imported objects</title> Resampling imported objects When pasting an image with a resolution that differs from the destination Fireworks document, Fireworks displays a message asking if you want the image to be resampled. Resampling adds pixels to or subtracts pixels from a resized image to match the appearance of the original image as closely as possible. Resampling an image to a higher resolution typically causes little data or quality loss. Resampling to a lower resolution always causes data loss and a drop in quality. To maintain the pasted data's original width and height, adding or subtracting pixels as necessary, choose Resample. To keep all the original pixels, which may make the relative size of the pasted image larger or smaller than expected, choose Don't Resample.
<url>html/05Drawing18.html</url>
<title>Importing PNG files</title> Importing PNG files You can import Fireworks PNG files onto the current drawing layer. Consider these issues: Hotspot objects and slice objects are placed on the Web Layer of the document. For more information, see Viewing hotspots on the Web Layer . Layers within the imported file are merged. In files with more than one frame, only the first frame is imported. To import a PNG file into a Fireworks document: 1 Choose File > Import to open the Import dialog box. 2 Navigate to the file and click Open. 3 Move the import pointer where you want the top left corner of the image: Click to import the full-size image. Drag the import pointer to resize the imported image. Fireworks retains the proportions of the image. The objects in the file appear and are selected so you can easily group, move, or distribute them immediately after import.
<url>html/05Drawing2.html</url>
<title>Entering object mode</title> Entering object mode When you create a new Fireworks document, it opens in object mode by default. However, if you open an image, or if you have used a tool that has switched Fireworks to image edit mode, you must return to object mode to draw and edit path objects. When you see a striped border around a document canvas, Fireworks is in image edit mode. To return to object mode: Double-click an area of the document window beyond the canvas with any selection tool. Click the Stop button in the Status bar. Stop cursor and Stop button Use a tool that only works in object mode, such as the Text tool. Choose Modify > Exit Image Edit. Press the Esc key. In Windows, press Control+Shift+D. On the Macintosh, press Command+Shift+D.
<url>html/05Drawing3.html</url>
<title>Choosing drawing and editing tools</title> Choosing drawing and editing tools The following table describes each tool's basic function in each mode. Some tools work only in one mode, while others work in both. The characteristics of some tools change according to the mode in which you are drawing. Tools that behave exactly the same in both modes are omitted from this table. Tool In object mode In image edit mode Pointer Selects and moves paths on-screen. Moves the image or moves pixels bound by a marquee. Double-click an image to edit its pixels. Select Behind Selects an object behind the selected object. Moves the image or moves pixels bound by a marquee. Sub-selection Selects and moves paths on screen, selects an object within a group or symbol, displays points on a path, and selects points. Moves the image or moves pixels bound by a marquee. Marquee or Ellipse Marquee Activates image edit mode and selects a rectangular or elliptical area of pixels. Selects or moves a rectangular or elliptical area of pixels. Lasso or Polygon Lasso Activates image edit mode and selects a freeform area of pixels. Selects or moves a freeform area of pixels. Magic Wand Activates image edit mode and selects an area of similarly colored pixels. Selects an area of similarly colored pixels. Line and Basic Shapes Draws objects as editable paths. Paints pixel brush strokes on an image object. Pen Draws objects as editable paths. Activates objects mode and draws objects as editable paths. Text Creates and edits text blocks and opens the Text Editor. Activates objects mode, creates text blocks, and opens the Text Editor. Pencil Draws 1-pixel pencil strokes as freeform paths. Draws 1-pixel pencil strokes as pixels. Brush Draws brush strokes as paths. Paints brush strokes as pixels. Freeform Pulls or pushes a selected path to reshape it. Activates object mode. Reshape Area Reshapes the parts of a selected path that lie within the pointer's Reshape Area. Activates object mode. Path Scrubber Alters a path's pressure and speed characteristics without changing its shape. Activates object mode. Knife/ Eraser When in object mode, this tool is the Knife. It cuts a selected path into separate paths. When in image edit mode, this tool is the Eraser. It erases pixels from an image. Rubber Stamp Activates image edit mode and clones portions of an image object. Clones portions of an image object.
<url>html/05Drawing4.html</url>
<title>Drawing in object mode</title> Drawing in object mode In object mode, paths and points are the basic elements of graphic design. If you magnify a Fireworks path object, you will see that it is made of pixels, as if painted in an image editing application. However, if you choose the Subselection tool and select a path object, you will see the path and points that define and control the shape of the path object. For more information on selecting, see Selecting objects . Draw path objects in any of these ways: Draw lines, rectangles, ellipses, stars, and polygons by dragging a tool. Paint freeform paths or draw 1-pixel pencil strokes. Draw freeform paths by plotting points, as in FreeHand.
<url>html/05Drawing5.html</url>
<title>Understanding open and closed paths</title> Understanding open and closed paths Paths are either open or closed: An open path has a beginning point and an ending point that do not connect. A closed path's beginning point and ending point are the same point. Open path and closed path A single path can overlap itself to create a loop that appears to enclose an area, but that is not a closed path. Only joined endpoints create a closed path. Either type of path can have a fill. For more about fills, see Changing the fill of the drawing tools .
<url>html/05Drawing6.html</url>
<title>Drawing lines, rectangles, and ellipses</title> Drawing lines, rectangles, and ellipses You can easily draw perfect lines, rectangles, squares, ellipses, and circles in Fireworks. Use the Line tool and basic shape tools to draw them. Line tool and basic shape tools Polygons, triangles, and stars are also basic shapes. For information, see Drawing triangles and other polygons . To draw a line, rectangle, or ellipse: 1 Choose the Line tool or a basic shape tool. 2 Hold down the mouse button to start the path. 3 Drag to draw it. 4 When the path is complete, release the mouse button. To draw a square: Hold down Shift while dragging the Rectangle tool. To draw a circle: Hold down Shift while dragging the Ellipse tool. To constrain a line's orientation to increments of 45 degrees: Hold down Shift while dragging the Line tool. To draw a basic shape from a specific centerpoint: In Windows, hold down Alt and drag a drawing tool. On the Macintosh, hold down Option and drag a drawing tool. To both constrain a shape and draw from the centerpoint: In Windows, hold down Shift+Alt while dragging a drawing tool. On the Macintosh, hold down Shift+Option while dragging a drawing tool.
<url>html/05Drawing7.html</url>
<title>Rounding rectangle corners</title> Rounding rectangle corners You can round the corners of a rectangle or square as you draw it by setting the curvature of the corners in the Rectangle tool Options panel. Set this value before drawing the rectangle. To draw a rectangle with rounded corners: 1 Double-click the Rectangle tool to open the Rectangle tool Options panel. 2 Enter a value in the Corner text box. 3 Hold down the mouse button and drag to draw a rectangle. Note: You cannot round the corners of an existing rectangle.
<url>html/05Drawing8.html</url>
<title>Drawing triangles and other polygons</title> Drawing triangles and other polygons Use the Polygon tool Options panel to set the number of sides for the polygon. Be sure to change these settings before drawing the object. To draw a triangle or other polygon: 1 Double-click the Polygon tool to open the Polygon tool Options panel. 2 Choose Polygon from the Shape pop-up menu. 3 Enter the number of sides for the polygon. 4 Hold down the mouse button and drag to draw the polygon. Note: The Polygon tool always draws from a centerpoint. To constrain a shape's orientation to increments of 45 degrees: Hold down Shift as you draw.
<url>html/05Drawing9.html</url>
<title>Drawing stars</title> Drawing stars You can draw stars from 3 to 360 points. To set a number of points greater than 25, enter a value directly in the text box. You can also vary the angle of acuteness. Use the Polygon tool Options panel to set the number of points and the angle acuteness. Be sure to change these settings before drawing the star. Five-point star with Angle = Automatic; five-side polygon; and eight-point star with Angle = 10 To draw a star: 1 Double-click the Polygon tool to open the Polygon tool Options panel. 2 Choose Star from the Shape pop-up menu. 3 Enter the number of points for the star. 4 Set the Angle Acuteness: Choose Automatic Acuteness. Enter a value for Angle Acuteness. The smaller the number, the greater the angle. 5 Hold down the mouse button and drag to draw the star. Note: The Polygon tool always draws from a centerpoint. To constrain a shape's orientation to increments of 45 degrees: Hold down Shift as you draw.
<url>html/06Editing1.html</url>
<title>Overview: Editing objects</title> Overview: Editing objects Drawing a path with a Fireworks drawing tool is only the first step in creating Web graphics. Use Fireworks editing features to make the object unique. After you draw a path object, you can select it, and then reshape it into the exact shape you want. You can reshape a path by moving points along the path or by adjusting point handles. You can push and pull line segments, or even redraw segments that replace the original segment between two points. Then you can edit the object's stroke and fill attributes. Stroke options range from pencil-thin lines to wide swaths resembling spray paint or even an oil slick. Customize every characteristic of a stroke, and then save it to use it again. Fill options range from solid color to multicolor gradients to bitmap patterns. After applying a gradient or pattern fill, you can edit it in the workspace to create wild, original fills. In addition to Fireworks patterns, you can use most any other image on your computer. You can also add texture to strokes and fills. If you like the way you have used strokes, fills, and other attributes to make an object unique, you can save the attributes as a style. Rather than rebuilding attributes to recreate the look of an object, you can simply save the look as a style and then apply the style to other objects. If you plan to reuse a graphic throughout a document, create a symbol from it and use instances of the symbol wherever you want. Easily create blends between instances using a technique known as tweening. When you edit a symbol, all instances automatically change to reflect the edits, no matter where they are in the document. You can rotate, scale, skew, and distort objects using the transformation tools and commands. You can also arrange the stacking order of objects, group them to work with them as a single object, and use layers to organize them.
<url>html/06Editing10.html</url>
<title>Redrawing paths</title> Redrawing paths Use the Redraw Path tool to redraw a segment of a selected path, while retaining the brush, fill, and effect characteristics of the path. To redraw a segment of a selected path: 1 Choose the Redraw Path tool. 2 Move the pointer directly over a path. The pointer changes to the redraw path pointer. 3 Drag to redraw a path segment. The portion of the path to be redrawn is highlighted in red. 4 Release the mouse button to replace the path segment.
<url>html/06Editing11.html</url>
<title>Cutting paths into multiple objects</title> Cutting paths into multiple objects Use the Knife tool to slice a path into two or more paths. Note: If you select an image object, the Knife tool becomes the Eraser tool. To cut a selected path: 1 Choose the Knife tool. 2 Cut the path: Drag the pointer across the path. Click the path. 3 Deselect the path.
<url>html/06Editing12.html</url>
<title>Reshaping path objects using path operations</title> Reshaping path objects using path operations Use path operations to create shapes by combining or altering existing paths. Using a path operation removes all pressure and speed information from the affected paths. For some path operations, the stacking order of selected path objects defines how the operation works. For information on arranging the stacking order of selected objects, see Arranging objects .
<url>html/06Editing13.html</url>
<title>Combining path objects</title> Combining path objects You can combine path objects into a single path object. To create one continuous path from two open paths: 1 Choose the Subselection tool. 2 Select two endpoints on two open paths. 3 Choose Modify > Join. To create a composite path: 1 Select two or more open or closed paths. 2 Choose Modify > Join. To break apart a composite path: 1 Select a composite path: 2 Choose Modify > Split. To combine closed paths into one path enclosing the entire area of the original paths: Choose Modify > Combine > Union. The resulting path assumes the stroke and fill attributes of the back object. You can create an object from the intersection of two or more objects. To create a closed path that encloses the area common to all selected closed paths: Choose Modify > Combine > Intersect. The resulting path assumes the stroke and fill attributes of the back path object.
<url>html/06Editing14.html</url>
<title>Removing portions of a path object</title> Removing portions of a path object You can remove portions of a selected path object as defined by the overlapping portions of another selected path object that is arranged in front of it. To remove portions of a path object: 1 Select the path object that defines the area to be removed. 2 Choose Modify > Arrange > Bring to Front. 3 Hold down Shift and add to the selection the path object from which the portions are to be removed. 4 Choose Modify > Combine > Punch. Stroke and fill attributes remain unchanged.
<url>html/06Editing15.html</url>
<title>Cropping a path</title> Cropping a path You can remove portions of a selected path outside the area defined by another selected path that is arranged in front of it. To crop a selected path: 1 Select the path object that defines the area to be cropped. 2 Choose Modify > Arrange > Bring to Front. 3 Hold down Shift and add to the selection the path object to be cropped. 4 Choose Modify > Combine > Crop. The resulting path object retains the stroke and fill attributes of the back path object.
<url>html/06Editing16.html</url>
<title>Simplifying a path</title> Simplifying a path You can remove points from a path while maintaining the same overall shape. To simplify a selected path: Choose Modify > Alter Path > Simplify.
<url>html/06Editing17.html</url>
<title>Expanding a stroke</title> Expanding a stroke You can convert the perimeter of the stroke of the selected path into a closed path. The resulting path creates the illusion of a path with no fill and a stroke that is the same as the original path object's fill. To expand a selected object's stroke: 1 Choose Modify > Alter Path > Expand Stroke to open the Expand Stroke dialog box. 2 Set the Width of the resulting closed path, with the appearance that the stroke of the original object has been widened. 3 Specify a corner type: miter, round, or beveled. 4 If you chose miter in step 3, set the miter limit, the point at which a miter corner automatically becomes a beveled corner. The miter limit is the ratio of miter corner length to stroke width. 5 Choose an end cap option: butt, square, or round and click OK. A closed path in the shape of the original object's path with the same stroke and fill attributes of the original path object replaces the original path.
<url>html/06Editing18.html</url>
<title>Contracting or expanding a path</title> Contracting or expanding a path Contract or expand the path of a selected object by a specific amount. To expand or contract a selected path: 1 Choose Modify > Alter Path > Inset Path to open the Inset Path dialog box. 2 Choose to contract or expand the path: Inside contracts the path. Outside expands the path. 3 Set the width between the original path and the contracting or expanding path. 4 Specify a corner type: miter, round, or beveled. 5 If you chose miter in step 4, set the miter limit, the point at which a miter corner automatically becomes a beveled corner. The miter limit is the ratio of miter corner length to stroke width. 6 Click OK. A smaller or larger path object with the same stroke and fill attributes replaces the original path object.
<url>html/06Editing19.html</url>
<title>Changing stroke and fill colors</title> Changing stroke and fill colors After you draw a path object, you can change its stroke and fill attributes. Adding a stroke to a selected object paints the outline of the object with black, white, or a color. Adding a solid fill to a selected object paints the interior of the object with black, white, or a color. The current stroke and fill colors appear in the stroke and fill color wells in the Stroke panel, Fill panel, Color Mixer, and Toolbox. Stroke and fill color wells in the Toolbox After you apply a color to a stroke and a color to a fill, those colors become the active colors for the next objects you draw. To change the stroke or fill color before drawing the next object: Choose a color swatch from the stroke or fill color well pop-up menu in the Toolbox. To change the stroke or fill color of a selected object: Choose a color swatch from the stroke or fill color well pop-up menu in the Toolbox. To swap fill and stroke colors: Click the Swap Colors button in the Color Mixer or in the Toolbox. The stroke color becomes the fill color and the fill color becomes the stroke color. To reset colors to the default: Click the Default Colors button. To change the default colors: 1 Choose File > Preferences. 2 Under the Color Defaults in the General panel, choose colors from the Brush and Fill color well pop-up menus and click OK. To use a color from the system color picker: 1 Click the color picker button from the color well pop-up menu. The Color dialog box (Windows) or the Apple color picker (Macintosh) opens. 2 Choose a color from the system color picker and click OK. The color becomes the new stroke or fill color. For information on adding a color from the color picker to the Swatches panel, see Customizing the Swatches panel .
<url>html/06Editing2.html</url>
<title>Selecting objects</title> Selecting objects To edit an object, you must select it. You can select objects by clicking them or by dragging selection marquees around them using the Pointer, Select Behind, or Subselection tools. Note: Use the Marquee, Lasso, or Magic Wand tool to select an area of pixels in image edit mode. For more information, see Selecting pixels . To select a path object: 1 Choose the Pointer tool. 2 Move the pointer over the stroke of the object, or move it over the fill if the object has a fill. Note: When the Mouse Highlight tool option is on, the highlight indicates when the pointer is in place to select the object. For more information, see Highlighting selectable objects . 3 Click the object. A selection path outlining the object appears. To select multiple objects: Choose the Pointer tool and drag a box around the objects. To add to a selection: Hold down Shift while selecting additional objects. Other selected objects remain selected. To deselect an object while leaving other objects selected: Hold down Shift and click a selected object. Other selected objects remain selected. When stacked, grouped, or overlapping paths obscure a path, you can still select the underlying path. To select a path behind another path: 1 Choose the Select Behind tool. 2 Click a path repeatedly until you have selected the object you want. To select everything on every layer in the document: Choose Edit > Select All. In Windows, press Control+A. On the Macintosh, press Command+A. Note: Select All does not select objects on locked or hidden layers. When Single Layer Editing is enabled, only objects on the current layer are selected. For information, see Creating and arranging layers . To deselect everything on every layer: Choose Edit > Deselect. In Windows, press Control+D. On the Macintosh, press Command+D.
<url>html/06Editing20.html</url>
<title>Editing strokes</title> Editing strokes You can edit strokes to create paths with a range of possible pen or brush characteristics, from thin, pencil-like paths to wide swaths resembling spray paint or splattered oil. Stroke textures add to the range of creative possibilities. Using the Stroke panel and the Edit Brush panels, you have full control of every brush nuance, including ink amount, tip size and shape, texture, edge effect, and aspect. Also, sensitivity settings control how a pressure-sensitive pen affects strokes. You can save the resulting brush to use again. A newly created stroke assumes the current color displayed in the brush color well. Use the Stroke panel to change the stroke applied to an object. To edit the stroke of a selected object: 1 In the Stroke panel, choose a stroke category, such as Pencil, Oil, or Watercolor from the Stroke Category pop-up menu. 2 Choose a stroke from the Stroke Name pop-up menu. 3 To change the stroke color, choose a swatch from the color well pop-up menu. 4 Alter the edge softness using the Edge Softness slider next to the Tip preview. 5 Choose a texture from the Texture pop-up menu and enter a value for its intensity. For more information, see Adding texture to a stroke . Note: Some stroke categories have a texture applied to them by default.
<url>html/06Editing21.html</url>
<title>Adding texture to a stroke</title> Adding texture to a stroke Textures modify the brightness of the stroke, but not the hue, and give strokes a less mechanical, more organic look. Textures are more effective with wide strokes. You can add a texture to any stroke. Fireworks ships with several textures from which to choose, such as Chiffon, Oilslick, and Sandpaper. You can also use bitmap files from your computer or a CD-ROM as a texture. You can use these file formats as textures: PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only). To include an external texture in the Texture pop-up menu for use in all documents, copy the texture file to the Fireworks 3\Settings\Textures folder. Use the Stroke panel to add a texture to a brush stroke . The Texture pop-up menu previews the highlighted texture. To add texture to the stroke of a selected object: 1 In the Stroke panel, choose a stroke category from the Stroke Category pop-up menu and a specific stroke from the Stroke Name pop-up menu. 2 Choose a texture: Choose the texture from the Texture pop-up menu. Choose Other from the Texture pop-up menu to use an external texture. Navigate to a texture file. 3 Enter a percentage from 0 to 100 to control the depth of the texture. Increasing the percentage increases the texture intensity.
<url>html/06Editing22.html</url>
<title>Creating custom strokes</title> Creating custom strokes You can create and save custom strokes for reuse in the current document, and you can change specific stroke characteristics such as ink amount, tip shape, and tip sensitivity. Use the Options pop-up menu in the Stroke panel to edit brush stroke attributes and to create and save custom brush strokes. Use the Edit Stroke dialog box to change specific stroke characteristics. To open the Edit Stroke dialog box: Choose Edit Stroke from the Stroke panel Options pop-up menu. The Edit Stroke dialog box has three tabbed panels: Options, Shape, and Sensitivity. The stroke preview at the bottom of any Edit Stroke panel shows the current brush with the current settings. A stroke in the preview that tapers or fades or otherwise changes from left to right illustrates the current pressure- and speed-sensitivity settings. To set general brush stroke options: 1 In the Options panel, set the ink amount, spacing, and flow rate. Higher flow rates create brush strokes that flow over time, as with an airbrush . 2 To overlap brush stroke stamps for dense strokes, select Build-up. 3 To set the stroke texture amount, change the Texture option. The higher the number, the more apparent the texture becomes. 4 To set texture on the edges, enter a number in the Edge Texture text box and choose an edge effect from the Edge Effect pop-up menu. 5 In the Tips text box, enter the number of tips you want the brush stroke to have. For multiple tips, enter a Tip Spacing value, and choose the color variation method. You can choose Random, Uniform, Complementary, Hue, or Shadow. 6 Click Apply to apply the settings to selected strokes and click OK. To modify the brush tip: 1 In the Shape panel, choose a tip shape: Square, or for a round tip, deselect Square. 2 Enter values for the brush tip size, edge softness, tip aspect, and tip angle. 3 Click Apply and click OK. Fireworks has stroke settings for fine-tuning stroke attributes controlled by speed and pressure when using a Wacom pressure-sensitive tablet and pen. You can choose the stroke attribute to control with the pen. To set stroke sensitivity: 1 In the Sensitivity panel, choose a stroke property such as Size, Ink Amount, or Saturation from the Stroke Property pop-up menu. 2 From the Affected By options, choose the degree to which sensitivity data affects the current stroke property and click OK.
<url>html/06Editing23.html</url>
<title>Saving stroke settings</title> Saving stroke settings You can save edited strokes for use within the current document or among several documents. To save a stroke: 1 From the Stroke panel Options pop-up menu, choose Save Stroke As. 2 In the Save Stroke dialog box, enter a name for the stroke and click OK. The stroke name is added to the stroke name pop-up menu for use within the document. To reuse a saved stroke in another document: 1 Copy an object with the saved stroke. 2 Paste the object into the other document. The saved stroke is added to the stroke name pop-up menu for use within the other document. To rename a stroke: 1 Deselect all objects. 2 Choose the stroke from the Stroke panel. 3 Choose Rename Stroke from the Option pop-up menu. 4 In the Rename Stroke dialog box, type a name for the stroke or the fill, and click OK. To delete a stroke: 1 Choose the stroke from the Stroke panel. 2 From the Option pop-up menu, choose Delete Stroke.
<url>html/06Editing24.html</url>
<title>Placing the stroke on the path</title> Placing the stroke on the path By default, an object's brush stroke is centered on the path. You can change options for placing the brush stroke completely inside or outside the path. This lets you control the overall size of stroked objects, and lets you make creative effects, such as using strokes on the edges of beveled buttons. Centered stroke, stroke inside, and stroke outside Use the Stroke placement buttons in the Object inspector to reorient brush strokes. To move a brush stroke inside or outside the selected path: 1 Choose a Stroke Placement button in the Object inspector: inside, centered, or outside. 2 Optionally, choose Fill over Stroke. Normally, the stroke overlaps the fill between the path and the inside edge of the stroke. Choosing Fill over Stroke fills selected objects all the way to the paths. Choosing this option may cause opaque fills to obscure parts of the brush strokes inside paths. Fills with a degree of transparency may tint or blend with brush strokes inside paths.
<url>html/06Editing25.html</url>
<title>Editing fills</title> Editing fills You can edit fills to create paths with a variety of solid, dithered, pattern, or gradient characteristics, from solid colors, to gradients resembling satin, ripples, or folds. You can change various attributes of a fill, such as the color, edge, texture, and transparency for a particular object. You can save custom Gradient fills for use within the current document or among several documents. A newly created fill assumes the current color displayed in the fill color well in the Toolbox. Use the Fill panel to edit fill attributes.
<url>html/06Editing26.html</url>
<title>Editing a Solid fill</title> Editing a Solid fill A Solid fill is simply a solid color that fills the interior of an object. You can change an object's fill color in the Toolbox, Fill panel, and Color Mixer. To edit a selected object's Solid fill: 1 In the Fill panel, choose Solid from the Fill Category pop-up menu. 2 From the color well pop-up menu, choose a color. The fill appears in the selected object and becomes the active fill color.
<url>html/06Editing27.html</url>
<title>Applying a Gradient fill</title> Applying a Gradient fill All fill categories other than None, Solid, Pattern, and Web Dither are Gradient fills. Gradient fills blend colors to create various effects. To apply a Gradient fill to a selected object: 1 From the Fill panel, choose a Gradient fill from the Fill Category pop-up menu. 2 From the Fill Name pop-up menu, choose a fill color combination, such as Red, Green, Blue or Pastels. The fill appears in the selected object and becomes the active fill.
<url>html/06Editing28.html</url>
<title>Editing a Gradient fill</title> Editing a Gradient fill You can edit, save, rename, or delete a Gradient fill using the Fill panel Options pop-up menu and Edit Gradient dialog box. Edit Gradient dialog box To open the Edit Gradient dialog box: 1 Select an object that has a Gradient fill or choose a Gradient from the Fill Category pop-up menu. 2 Choose Edit Gradient from the Fill panel Options pop-up menu. The Edit Gradient dialog box opens with the current Gradient in the color ramp and preview. To adjust the transition between colors in the fill: Drag color swatches left or right. To add a new color swatch to the gradient: Click the area between the color ramp and the preview. To remove a color swatch from the gradient: Drag the swatch away from the Edit Gradient dialog box. To change the color of a color swatch: 1 Double-click the color swatch. 2 Choose a color from the Swatches pop-up menu. When you have finished editing the Gradient, click OK in the Edit Gradient dialog box. The Gradient fill appears in any selected objects and becomes the active fill.
<url>html/06Editing29.html</url>
<title>Saving and reusing Gradient fills</title> Saving and reusing Gradient fills You can save any change to Gradient fill settings. Saving a Gradient fill saves it only for use within the current document. To save the current Gradient fill: 1 Choose Save Gradient As from the Fill panel Options pop-up menu. 2 In the Save Gradient dialog box, enter a fill name and click OK. To reuse a saved Gradient fill in another document: 1 Copy an object with the saved fill. 2 Paste it into the other document. The saved fill is added to the Fill panel for use within the other document. To rename a Gradient fill: 1 Select the fill from the Fill panel. 2 Choose Rename Gradient from the Options pop-up menu. 3 In the Rename Gradient dialog box, type a name for the fill and click OK. To delete a saved Gradient fill: 1 Select the fill from the Fill panel. 2 Choose Delete Gradient from the Options pop-up menu.
<url>html/06Editing3.html</url>
<title>Highlighting selectable objects</title> Highlighting selectable objects When a selection tool is active and the mouse rolls over an object, a highlight appears on the object to indicate that it is selectable. You can disable this highlight if it becomes distracting. To disable highlighting: 1 Double-click a selection tool to open its tool Options panel. 2 Deselect Mouse Highlight.
<url>html/06Editing30.html</url>
<title>Applying to a Pattern fill</title> Applying to a Pattern fill In addition to Solid and Gradient fills, you can fill a path object with a bitmap graphic, known as a Pattern fill. Fireworks ships with more than a dozen Pattern fills, including Berber Rug, Photinia Leaves, and Bricks. You can also use a bitmap file from your computer or a CD-ROM as a Pattern fill. You can use these file formats as patterns: PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only). If a pattern file is a 32-bit transparent image, the transparency will affect the fill when used in Fireworks. If an image is not 32-bit, it will be opaque. To include an external pattern in the Fill Name pop-up menu for use in all documents, copy the pattern file to the Fireworks 3\Settings\Patterns folder. To apply a Pattern fill to a selected object: 1 In the Fill panel, choose Pattern from the Fill Category pop-up menu. 2 Choose a pattern: Choose the pattern from the pattern name pop-up menu. Choose Other from the pattern name pop-up menu to use an external pattern. Navigate to a pattern file. The Pattern fill appears in the selected object and becomes the active fill color. Note: Although the Pattern fill is active and will be applied to subsequent objects you draw, it does not appear in the fill color well in the Toolbox, Fill panel, or Color Mixer.
<url>html/06Editing31.html</url>
<title>Transforming and distorting Gradient and Pattern fills</title> Transforming and distorting Gradient and Pattern fills You can move, rotate, skew, and change the width of an object's Pattern or Gradient fill. When you select an object with a Pattern or Gradient fill and choose the Paint Bucket tool, a set of handles appears on or near the object. Drag these handles to adjust the object's fill. Use the Paint Bucket tool handles to interactively adjust a Pattern or Gradient fill. To move the fill within an object: Drag the round handle, or click in a new location within the fill. To rotate the fill: Drag the lines connecting the handles. To adjust the fill width and skew: Drag a square handle.
<url>html/06Editing32.html</url>
<title>Adding texture to a fill</title> Adding texture to a fill Textures modify the brightness of a fill, but not the hue, and give fills a less mechanical, more organic look. You can add a texture to any fill. Fireworks ships with several textures from which to choose, such as Chiffon, Oilslick, and Sandpaper. You can also use bitmap files from your computer or a CD-ROM as a texture. You can use these file formats as textures: PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only). To include an external texture in the Texture pop-up menu for use in all documents, copy the texture file to the Fireworks 3\Settings\Textures folder. Use the Fill panel to add a texture to a fill . The Texture name pop-up menu displays a preview of the highlighted texture. To add texture to the fill of a selected object: 1 In the Fill panel, choose a fill type from the fill category pop-up menu. 2 Choose a texture: Choose the texture from the Texture pop-up menu. Choose Other from the Texture pop-up menu to use an external texture. Navigate to a texture file. 3 Enter a percentage from 0 to 100 to control the depth of the texture. Increasing the percentage increases the texture intensity. 4 To introduce a level of transparency to the fill, choose Transparent. The Texture percentage also controls the degree of transparency.
<url>html/06Editing33.html</url>
<title>Dithering with Websafe colors</title> Dithering with Websafe colors Sometimes you may need to use a color that is not a Websafe color. For example, your company logo may use a color that is not in the Web 216 color palette. To approximate a Websafe color that will neither shift nor dither when exported with a Websafe palette, use a Web Dither fill. Web Dither is the method whereby two colors in the palette are combined to most closely replicate a color that is not in the palette. Web Dither can increase the file size. Two Websafe colors create a Web Dither fill. To use the Web Dither fill: 1 Select an object containing a non-Websafe color. 2 In the Fill panel, choose Web Dither as the fill category. The object's non-Websafe fill appears in the Fill color well next to the fill type. The two Websafe dither colors appear in the checkerboard color wells beneath. The Web Dither appears on the object and becomes the active fill color. Note: Setting the edge of a Web Dither fill to Anti-Alias or Feather results in colors that are not Websafe. To create the illusion of a true transparent fill in a Web browser: 1 In the Fill panel, apply a Web Dither fill to a selected object. 2 Select Transparent. 3 Export the object as a GIF or PNG with Index Transparency or Alpha Channel Transparency set. When you view the graphic in a Web browser, the Web page background shows through every other pixel of the transparent Web Dither fill, creating the appearance of transparency.
<url>html/06Editing34.html</url>
<title>Changing a fill's edge</title> Changing a fill's edge In Fireworks, you can set the edge of a fill to be a regular hard line, or soften the edge by anti-aliasing it or feathering it. By default, edges are anti-aliased. Anti-aliasing smooths jagged edges that may occur on rounded objects, such as ellipses and circles, by subtly blending the edge into the background. Feathering, however, makes a noticeable blend on either side of the edge. This gives the edge a softened effect—almost a glow. To change the fill edge of a selected object: 1 In the Fill panel, choose an option from the Edge pop-up menu: Hard Edge, Anti-Alias, or Feather. 2 For a feathered edge, also choose the number of pixels on each side of the edge that are to be feathered. The default is 10. You can choose from 0 to 100. The higher the level, the more feathering occurs.
<url>html/06Editing35.html</url>
<title>Using styles</title> Using styles You can save and reapply a set of predefined fill, stroke, effect, or text attributes by creating a style. Styles in Fireworks are more like paint mixes on an artist's palette than styles in a word processor. When you apply a style to an object, that object takes on the style's characteristics. Fireworks has many predefined styles. You can add, change, and remove styles. The Fireworks CD-ROM and the Macromedia Web site have many more predefined styles that you can import into Fireworks. For information, see Importing and exporting styles .
<url>html/06Editing36.html</url>
<title>Applying and editing styles</title> Applying and editing styles Use the Styles panel to store and apply styles to objects or text. Styles panel Fireworks does not keep track of which style you applied to an object; the object does not update if you edit the style. To apply a style to a selected object or text block: Click a style in the Styles panel. To add a new style: 1 Create an object or text with the stroke, fill, effect, or text settings you want. 2 With the object selected, enter a name for the style: Click the New Style button at the bottom of the Styles panel. Choose New Style from the Styles panel Options pop-up menu. 3 Choose the properties you want to be part of the style and click OK. An icon depicting the style appears in the Styles panel. To edit a style: 1 Open the Edit Styles dialog box: Double-click a style in the Styles panel. Click a style in the Styles panel and choose Edit Style from the Options pop-up menu. 2 In the Edit Style dialog box, choose or deselect components of the style you wish to apply. To base a new style on an existing style: 1 Apply the base style to a selected object. 2 Edit the attributes of the object. 3 Save the attributes as a new style. To delete a style: 1 Choose a style from the Styles panel. To select multiple styles for deleting, hold down the Shift key while choosing styles. 2 Click the Delete Style button in the Styles panel. Note: If you delete a style you created, you cannot recover it. If you delete a style supplied in Fireworks, you can recover it and all other styles using the Reset Styles command in the Options pop-up menu. However, resetting styles also deletes your custom styles. To reset the Styles panel to the default styles: Choose Reset Styles from the Options pop-up menu. To enlarge the style preview icons: Choose Large Icons from the Options pop-up menu. To switch back to the small previews: Choose Large Icons again.
<url>html/06Editing37.html</url>
<title>Importing and exporting styles</title> Importing and exporting styles The Fireworks CD-ROM and the Macromedia Web site have many additional predefined styles that you can import into Fireworks. You can also export styles and share them with other Fireworks users or import styles from other Fireworks documents. To export styles: 1 Choose styles in the Styles panel. To choose more than one style, hold down Shift as you click. 2 Choose Export Styles from the Options pop-up menu. 3 Enter a name and location for the saved-styles document. 4 Click Save. To import styles: 1 Choose Import Styles from the Options pop-up menu. 2 Choose a saved-styles document to import. All styles in the saved-styles document are imported and placed directly after the currently selected style in the Styles panel.
<url>html/06Editing38.html</url>
<title>Transforming and distorting objects</title> Transforming and distorting objects You can scale, rotate, flip, distort, or skew an object or group using the Transform tools and menu commands. You can also transform text, bitmap images, hotspots, and slices. Transform tools Choosing any Transform tool or menu command displays the transform handles. The handles frame the entirety of selected objects. Original object Rotated and scaled Skewed and distorted Flipped vertically and horizontally To edit selected objects in the workspace using the transform handles: 1 Choose a Transform tool. As you move the pointer, it changes to indicate the available activity. 2 Drag to transform the objects.
<url>html/06Editing39.html</url>
<title>Scaling objects</title> Scaling objects Scaling an object enlarges or reduces the object horizontally, vertically, or both ways. You can scale an object by dragging. To scale a selected object: 1 Display the transform handles: Choose the Scale Transform tool. Choose Modify > Transform > Scale. 2 Drag the transform handles: To scale the object both horizontally and vertically, drag one of the corner handles. Proportions are constrained as you scale. To scale the object horizontally or vertically, drag a center handle.
<url>html/06Editing4.html</url>
<title>Displaying paths and points when selecting path objects</title> Displaying paths and points when selecting path objects When you select a path object, Fireworks displays different types of path and point information, depending on the selection tool you use and the status of the Hide Edges command. To display the selection outline of a path, but not its points: Select the path using the Pointer or Select Behind tool. Choose the Pointer or Select Behind tool, if the path is selected and the points are showing. Object selected with the Pointer tool displays an outline of the path without points. To display the path and points of an object: Select the path using the Subselection tool. Choose the Subselection tool if the path is selected and the points are not showing. Object selected with the Subselection tool displays the path of the object with points. To hide the outline of a selected object: Choose View > Hide Edges. Note: To identify the selected object when the outline and points are hidden, look at the Status bar (Windows) or Object inspector. Selected object displays no outline when you choose Hide Edges.
<url>html/06Editing40.html</url>
<title>Rotating objects</title> Rotating objects A rotating object pivots on its centerpoint. You can rotate an object by dragging its transform handles or by choosing a preset angle. To rotate a selected object 90 or 180 degrees: Choose Modify > Transform and choose a Rotation command from the submenu. To rotate a selected object by dragging: 1 Choose any Transform tool. 2 Move the pointer outside the object until the rotation pointer appears. 3 Drag to rotate the object. To constrain rotation: Hold down Shift and move the pointer beyond the handles. To relocate the axis of rotation: Drag the centerpoint away from the center of the handles. To reset the axis of rotation: Double-click the centerpoint.
<url>html/06Editing41.html</url>
<title>Flipping objects</title> Flipping objects You can flip an object across its vertical or horizontal axis without moving its relative position on the canvas. To flip a selected object: Choose Modify > Transform > Flip Horizontal or Flip Vertical.
<url>html/06Editing42.html</url>
<title>Skewing objects</title> Skewing objects Skewing an object transforms it by slanting it along one or both horizontal and vertical axes. You can skew an object by dragging. To skew a selected object: 1 Display the transformation handles: Choose the Skew Transform tool Choose Modify > Transform > Skew. 2 Drag a handle to distort the object. To achieve the illusion of perspective: Drag a corner point.
<url>html/06Editing43.html</url>
<title>Distorting objects</title> Distorting objects Distorting an object moves its sides or corners in the direction in which you drag the Distortion tool. To distort a selected object: 1 Display the transform handles: Choose the Distortion Transform tool. Choose Modify > Transform > Distort. 2 Drag a handle to distort the object.
<url>html/06Editing44.html</url>
<title>Numeric transformations</title> Numeric transformations Rather than dragging to scale, resize, or rotate an object, you can transform it using specific values. To scale or rotate selected objects by specific measurements: 1 Choose Modify > Transform > Numeric Transform. The Numeric Transform dialog box opens. 2 From the pop-up menu, choose the type of transformation to perform on the current selection. 3 Type numeric values to transform the selection and click OK. To keep the horizontal and vertical size of the object proportional when scaling or resizing: Choose Constrain Proportions in the Numeric Transform dialog box. To transform the fill, stroke, and effect of the object along with the object: Choose Scale Attributes in the Numeric Transform dialog box. Note: If you deselect Scale Attributes, the stroke, fill, and effect attributes do not change in size; Fireworks scales only the path.
<url>html/06Editing45.html</url>
<title>Organizing objects</title> Organizing objects As a document grows more complex, you may want to organize the objects: Arrange objects behind or in front of other objects. The way objects are arranged is called the stacking order. Group individual objects. Create and arrange layers. Hide and show objects and layers.
<url>html/06Editing46.html</url>
<title>Arranging objects</title> Arranging objects Within a layer, Fireworks stacks objects based on the order in which you created them, placing the most recently created object on the top of the stack. The stacking order of objects determines how they appear when they are overlapping. To change the stacking order of objects, use the Arrange commands. If the objects are not overlapping, you won't see the change in the stacking order. To arrange an object: 1 Select the object. 2 Change the stacking order: Choose Modify > Arrange > Bring to Front or Send to Back to move the object to the top or the bottom of the stacking order. Choose Modify > Arrange > Bring Forward or Send Backward to move the object up or down one position in the stacking order. To select an object behind another object: 1 Choose the Select Behind tool. 2 Click the object in front of the object you want to select. 3 Continue clicking until you have selected the object you want.
<url>html/06Editing47.html</url>
<title>Hiding and showing objects</title> Hiding and showing objects You can hide objects temporarily, then show them again later. Hidden objects are not exported. To hide selected objects from view: Choose View > Hide Selection. Hide Selection does not hide guides. Note: When you close and reopen the document, hidden objects remain hidden. To show all objects, including hidden objects: Choose View > Show All.
<url>html/06Editing48.html</url>
<title>Grouping objects</title> Grouping objects Group two or more objects to freeze their positions and stacking order relative to one another. You can manipulate objects within a group. Objects within a group retain their individual characteristics, unless you modify the entire group. Group selected objects as a single object. To group two or more selected objects: Choose Modify > Group. To ungroup a selected group: Choose Modify > Ungroup.
<url>html/06Editing49.html</url>
<title>Selecting grouped objects</title> Selecting grouped objects To work with individual objects within a group, either ungroup the objects, or use the Subselection tool to subselect only the objects you want to modify. Subselection tool Modifying the attributes of a subselected object changes only the subselected object and not the entire group. Moving a subselected object to another layer removes the object from the group. Subselect an object within a group. To select an object within a group: 1 Choose the Subselection tool. 2 Click the object. To select a group that contains the selected object: Choose Edit > Superselect. To subselect all objects within a group: 1 Select the group. 2 Choose Edit > Subselect. Each object within the group becomes individually selected. To deselect an object in the group, hold down Shift and click the object.
<url>html/06Editing5.html</url>
<title>Selecting images in object mode</title> Selecting images in object mode Use the Pointer tool to select an image object in object mode. A selected image object is surrounded by a rectangular bounding box with resize handles. Image selected in object mode To hide the bounding box: Choose View > Hide Edges. Note: To switch to image edit mode, double-click the image.
<url>html/06Editing50.html</url>
<title>Creating and arranging layers</title> Creating and arranging layers Layers divide a Fireworks document into discrete planes, as though the components of the illustration were drawn on separate tracing paper overlays. Each object in a document resides on a layer. You can either create all layers before you draw, or add layers as needed. You can rearrange the stacking order of layers like you can rearrange the stacking order of objects on a single layer. Note: The canvas is below all layers, but it is not actually a layer. For information on working with the canvas, see Changing document size, color, and resolution . The Layers panel displays the current state of all layers in the current frame of a document. The name of the active layer is highlighted. Layers panel When you want to protect objects on all but the active layer from unwanted selection or changes, use Single Layer Editing. When Single Layer Editing is enabled, only objects on the current layer can be selected. To add a layer: Choose New Layer from the Layers panel Options pop-up menu. Click the New Layer button. Choose Insert > Layer. To activate a layer: Click the layer name in the Layers panel. Select an object on that layer. Objects you draw, import, or paste initially reside on the active layer. To name a layer: 1 Double-click a layer name in the Layers panel. The Layer Options dialog box opens. 2 In the Name text box, type a new name for the layer and click OK. To delete a layer: Drag a layer to the Delete Layer button. Select a layer and click the Delete Layer button. Select a layer and choose Delete Layer from the Layers panel Options pop-up menu. To move a layer: Drag a layer name up or down in the Layers panel. Moving a layer changes its stacking order. Within a document, Fireworks stacks layers based on the order in which you created them, placing the most recently created layer on the top of the stack. The stacking order of layers determines how objects on a layer overlap objects on other layers. To show or hide a layer: Click the square in the first column to the left of a layer name. An eye icon indicates that a layer is visible. Note: Hidden layers are not exported. To lock a layer: Click the square in the second column to the left of a layer name. A padlock indicates that a layer is locked. Objects on a locked layer are not editable. To duplicate a layer: Drag a layer to the New Layer button. Select a layer and choose Duplicate Layer from the Options pop-up menu in the Layers panel. To move selected objects to another layer: Drag the blue square to the desired layer. To copy selected objects to another layer: Hold down Alt (Windows) or Option (Macintosh) and drag the blue square to the desired layer. To share a layer across frames: Double-click a layer, and then in the Layer Options dialog box choose Share Across Frames. Select a layer you want to share, and then choose Share Layer in the Layers panel Options pop-up menu. Note: If a layer is shared across all frames, when you update any object on that layer, the object updates in all frames. To turn on or off Single Layer Editing: From the Layers panel Options pop-up menu, choose Single Layer Editing. A check mark indicates that Single Layer Editing is active. Deselect Single Layer Editing to turn off the option.
<url>html/06Editing51.html</url>
<title>The Web Layer</title> The Web Layer The Web Layer is a special layer that initially appears as a top layer in each new document. The Web Layer contains Web objects used for assigning interactivity to exported Fireworks documents. You can move the Web Layer in the Layers panel, but you cannot delete it. The Web Layer is always shared across all frames.
<url>html/06Editing52.html</url>
<title>Symbols and instances</title> Symbols and instances Use symbols and instances to simplify Fireworks animations and improve editability. Instances are representations of an original Fireworks object, which is designated as the symbol. When the symbol object (the original) is edited, the instances (copies) automatically change to reflect the modifications to the symbol. Use symbols and instances to easily modify complex illustrations containing multiple copies of objects, to share components across rollover states, and to quickly create and modify animations. Symbols are stored in the Library panel. The Library panel stores both graphic and button symbols. For information on blending two or more instances of the same symbol, see Tweening instances .
<url>html/06Editing53.html</url>
<title>Creating a symbol</title> Creating a symbol You can create a symbol from any object, text, or group. Symbols can include other symbols. To create a new symbol: 1 Choose Insert > New Symbol. The Symbol Properties dialog box opens. 2 In the Name text box, type a name for the symbol. 3 Choose a symbol type, either Graphic or Button, and click OK. The Symbol Editor or Button Editor opens. 4 Create the object to be used as a symbol and close the editor. The symbol appears in the Library and in the document. To turn one or more selected objects into a symbol: 1 Choose Insert > Convert to Symbol. The Symbol Properties dialog box opens. 2 In the Name text box, type a name for the symbol. 3 Choose a symbol type, either Graphic or Button, and click OK. The selected object becomes a symbol and the symbol appears in the Library.
<url>html/06Editing54.html</url>
<title>Placing instances</title> Placing instances You can add one or more instances of a symbol to the current document. To place an instance, drag a symbol from the Library panel to the current document. Arrow icon representing an instance
<url>html/06Editing55.html</url>
<title>Modifying a symbol</title> Modifying a symbol You can modify a symbol in the Symbol Editor to automatically modify all associated instances. To open the Symbol Editor: Double-click an instance of the symbol. Double-click the symbol object in the Library panel's preview pane. From the Library panel, select a symbol name and choose Edit Symbol from the Options pop-up menu. Double-click the symbol name in the Library panel. The Symbol Properties dialog box opens. Click Edit. To edit a symbol: 1 Double-click an instance to open the Symbol Editor. 2 Edit the symbol and close the window. All instances of the symbol change to reflect your modifications. To duplicate a symbol: 1 In the Library panel, select the symbol. 2 From the Options pop-up menu, choose Duplicate. To delete a symbol: 1 In the Library panel, select the symbol. 2 Choose Delete from the Library panel Options pop-up menu. 3 Click Delete. The symbol and all of its instances are deleted. To select all symbols in the Library that have not yet been used in the current document: Choose Select Unused Items from the Library panel Options pop-up menu.
<url>html/06Editing56.html</url>
<title>Releasing an instance from a symbol</title> Releasing an instance from a symbol Normally, modifying an instance modifies the symbol and other instances. However, you can modify an instance without affecting the symbol or other instances by first breaking the link between the instance and the symbol. To release an instance from a symbol: 1 In the document, select the instance. 2 Choose Modify > Symbol > Break Link. The instance reverts to a group. The symbol in the Library panel is no longer associated with that group.
<url>html/06Editing57.html</url>
<title>Exporting, importing, and updating symbols</title> Exporting, importing, and updating symbols You can export symbols for use in other Fireworks documents, and import symbols from other documents. If you change a symbol in the original document, you can update those changes in any document into which the symbol was imported. For example, suppose you have created a symbol for your company logo in a master file. Then you import the logo symbol into multiple documents. If the logo changes, you can modify it in the master file and update it in all of the files into which you imported it. You can break the link between the imported symbol and the original document automatically by editing the symbol in the current document. Breaking the link lets you edit the imported symbol independently from the original symbol. To export symbols: 1 From the Library panel Options pop-up menu, choose Export Symbols. The Export Symbols dialog box opens. 2 Select the symbols to export and click Export. The Save As dialog box opens. 3 Navigate to a folder, type a name for the symbol file, and click Save. Fireworks saves the symbols in a single PNG file. To import symbols using drag and drop or copy and paste: 1 Drag and drop a symbol into the current document. 2 Paste a symbol into the current document. To import symbols using the Library panel: 1 From the Library panel Options pop-up menu, choose Import Symbols. The Open dialog box appears. 2 Navigate to the folder containing the symbol file, choose a file, and click Open. The Import Symbols dialog box opens. 3 Select the symbols to import and click Import. The imported symbols appear in the Library panel with the word "imported" next to the file type. To update a symbol imported from another document: 1 In the original document, modify the symbol and save the file. 2 In the document to which the symbol was previously imported, select the symbol from the Library panel. 3 Choose Update from the Library panel's Options pop-up menu.
<url>html/06Editing6.html</url>
<title>Reshaping paths by editing points</title> Reshaping paths by editing points Points are the framework for Fireworks path objects. When you draw with any Fireworks drawing tool in object mode, the resulting path is defined by the points you specify when drawing. The type of point and the appearance of adjacent lines as curved or straight are directly related: A curve point indicates that adjacent segments are curved, maintaining smooth, winding transitions between segments. A corner point indicates that at least one of the adjacent segments is a straight line. To select specific points: 1 Choose the Subselection tool. 2 Select one or more points: Click a point, or hold down Shift and click multiple points one by one. Drag a selection area around one or more points. To move a point: Drag it with the Subselection tool. To convert a curve point to a corner point: 1 Choose the Pen tool. 2 Click a curve point to select it. 3 Click the point again to convert it. The handles retract and the adjacent segments straighten. To convert a corner point to a curve point: 1 Choose the Pen tool. 2 Click a corner point and drag away from it. The handles extend, curving the adjacent segments. To change the shape of an adjacent path segment: Drag a point handle. To display a point's handles if they are not visible: 1 Hold down Alt (Windows) or Option (Macintosh) and drag from the point with the Subselection tool. 2 Repeat the previous step to display the second point handle. The path preview shows where the new path would be drawn if you release the mouse button Drag a point handle with the Subselection tool to edit adjacent path segments. To bend only one adjacent segment, leaving the other segment unedited: 1 Choose the Subselection tool. 2 Select a point. 3 Bend the segment: In Windows, hold down Alt and drag a point handle. On the Macintosh, hold down Option and drag a point handle.
<url>html/06Editing7.html</url>
<title>Reshaping paths directly</title> Reshaping paths directly In addition to dragging points and point handles, you can use several Fireworks tools to edit paths. Object mode editing tools: Freeform, Reshape Area, Path Scrubber, Redraw Path, and Knife tools
<url>html/06Editing8.html</url>
<title>Bending paths</title> Bending paths Use the Freeform tool to bend a path without modifying its points. You can push or pull any part of a path. Fireworks automatically adds, moves, or deletes points along the path as you edit it. Freeform tool pulling a path segment Freeform tool pushing a path segment, and path redrawn to reflect the push As you move the mouse pointer over a selected path, the pointer changes to the push or pull pointer, depending on its location relative to the selected path. This pointer Indicates The Freeform tool is in use. The Freeform tool is in use, and the pull pointer is in position to pull the selected path. The Freeform tool is in use, and the pull pointer is pulling the selected path. The Freeform tool is in use, and the push pointer is active. The Reshape Area tool is in use, and the pointer is active. The area from the inner circle to the outer circle represents reduced strength. When the pointer is directly over the path, you can pull the path. When the pointer is not directly over the path, you can push the path. You can change the size of the push pointer. To pull selected paths: 1 Choose the Freeform tool. 2 Move the pointer directly over the selected path. The pointer changes to the pull pointer. 3 Drag the path. To push selected paths: 1 Choose the Freeform tool. The pointer changes to the push pointer. 2 Point slightly away from the path. 3 Drag toward the path to push it. Nudge the selected path to reshape it. To change the size of the push pointer: To increase the width of the pointer, press Right Arrow or 2. To decrease the width of the pointer, press Left Arrow or 1. To set the size of the pointer and set the length of the path segment that it affects, enter a value from 1 to 500 in the Size text box of the Options panel. The value indicates the size of the pointer in pixels. Note: The Freeform tool also responds to pressure from a Wacom or other compatible tablet.
<url>html/06Editing9.html</url>
<title>Distorting paths</title> Distorting paths Use the Reshape Area tool to pull the area of all selected paths within the outer circle of the Reshape Area pointer. The inner circle is the boundary of the tool at full strength. The area between the inner and outer circle reshapes paths at less than full strength. The inner circle of the reshape area pointer determines the gravitational pull of the pointer. You can set its strength. Note: The Reshape Area tool also responds to pressure from a Wacom or other compatible tablet. To distort selected paths: 1 Choose the Reshape Area tool. 2 Drag across the paths to redraw them. To change the size of the reshape area pointer: To increase the size of the pointer, press Right Arrow or 2. To decrease the width of the pointer, press Left Arrow or 1. To set the size of the pointer and set the length of the path segment that it affects, enter a value from 1 to 500 in the Size text box of the Options panel. The value indicates the size of the pointer in pixels. To set the strength of the inner circle of the reshape area pointer: Enter a value from 1 to 100 in the Strength text box of the Options panel. The value indicates the percentage of the pointer's potential strength. The higher the percentage, the greater the strength.
<url>html/07Color1.html</url>
<title>Overview: Color and transparency</title> Overview: Color and transparency Fireworks gives you a broad range of options when it comes to choosing colors for a graphic. You can use the default color swatches to help you maintain the appearance of your graphic on various Web browsers and computer platforms as you work. Or you can use the Windows or Macintosh system color swatches. You can create your own colors and groups of swatches, and you can add color swatches to or subtract swatches from any of the swatch groups. You can mix your own colors using any of several color models—Hexadecimal, RGB, CMY, HSB, or Grayscale. You can also view the components of any color in your document expressed in all of these color models. Upon export, you can designate as transparent the canvas color or other colors in a graphic, so that a Web page background shows through. You can also use colors to fix color-related flaws such as halos that appear around your Web graphics. To learn about optimizing colors for export using the Color Table, see Optimizing color palettes .
<url>html/07Color10.html</url>
<title>Viewing color information</title> Viewing color information You can view color information in the Info panel and Color Mixer. The Info panel displays the component values of the color at the current pointer location. The Color Mixer displays RGB values. To display color information for an alternate color model: Choose another color model from the Info panel Options pop-up menu. To view a color's information in the Color Mixer: 1 In the Color Mixer, choose the stroke or fill color well pop-up menu. 2 From the color well pop-up menu, click the Eyedropper button. The pointer changes to the eyedropper pointer. 3 Click the object containing the color you want to view. The active color well displays the color, the Color Mixer displays the component values, and the color is applied to any selected object.
<url>html/07Color11.html</url>
<title>Assigning transparency</title> Assigning transparency You can make the canvas color and other colors in your file appear transparent when exported as a PNG or GIF. When doing so, a Web page's background image or color can be seen through a portion of the graphic. This can make the graphic appear to be a part of the Web page, rather than resting on top. In Fireworks, a gray-and-white checkerboard denotes transparent areas in both the Original and Preview windows. You can also set the canvas color to be transparent. For information, see Changing document size, color, and resolution . Use the Transparency eyedropper buttons in the Optimize panel to make a color appear transparent when viewed in a Web browser. Note: Setting optimized colors to transparent does not affect the actual image, only the exported version of the image. You can see what the exported image will look like in the Preview window. For information on exporting, see Optimizing and previewing during export . To select a color for transparency: 1 Click Preview, 2-Up, or 4-Up. In 2-Up or 4-Up, click a view other than the original. 2 In the Optimize panel, choose Index Transparency from the Transparency pop-up menu at the bottom of the panel. The canvas color is made transparent in the preview. 3 To choose a different color, click the Set Transparency button. The pointer changes to an eyedropper. 4 Choose a color to make transparent: Click a color swatch in the Color Table panel. Click a color in the document. For more information on Preview windows, the Optimize panel, and Color Table panel, see Optimizing and previewing during export . To add colors to the transparency: 1 Click Preview, 2-Up, or 4-Up. In 2-Up or 4-Up, click a view other than the original. 2 In the Optimize panel, click the Add to Transparency button. The pointer changes to an eyedropper. 3 Choose another color to make transparent: Click a color swatch in the Color Table panel. Click a color in the preview. To remove colors from the transparency: 1 Click Preview, 2-Up, or 4-Up. In 2-Up or 4-Up, click a view other than the original. 2 Click the Remove from Transparency button 3 Choose a color to remove from the transparency: Click a color swatch in the Color Table panel. Click a color in the preview.
<url>html/07Color12.html</url>
<title>Anti-aliasing to match the target background color</title> Anti-aliasing to match the target background color Anti-aliasing makes an object appear smoother by blending the color of the object into the canvas color. For example, if the object is black, and the canvas is white, anti-aliasing adds several shades of gray to the pixels surrounding the object's border to make a smooth transition between the black and white. To prevent halos, make your canvas color match the background of the target Web page, anti-alias the object to the canvas, and then make the canvas transparent. If you want to anti-alias a graphic for multiple exports with different colored backgrounds, use the Matte pop-up menu in the Optimize panel. This is useful if the graphic will appear on Web pages with different colored backgrounds. To change the anti-alias colors to match the target background color: In the Optimize panel, select a color from the Matte pop-up menu. Try to match it as closely as possible to the color in the target Web page's background color.
<url>html/07Color13.html</url>
<title>Removing halos from Web graphics</title> Removing halos from Web graphics When viewing an anti-aliased graphic with a transparent canvas color in a Web browser, sometimes an off-colored ring, or halo, of pixels appears around the borders of the graphic. When you make the canvas color transparent, the pixels from the anti-aliasing remain. When you place the graphic on a Web page that has a background of a color other than the color to which it was anti-aliased, the perimeter pixels of the anti-aliased object may be apparent on the Web page's background. These form the halo, which is especially noticeable on a dark background. For native Fireworks files or imported Photoshop files, you can prevent halos by making the canvas color match the Web page's background color. You must remove the halo for GIF files missing the source file and for imported image files that are anti-aliased to an index color (usually a transparent canvas color). To remove the halo, make the lighter anti-alias colors in the halo transparent using the Optimize panel. Optimize panel Use Index Transparency and manually trim the halo colors using the Eyedropper buttons in the Optimize panel. To remove the halo from a graphic: 1 Click Preview, 2-Up, or 4-Up. In 2-Up or 4-Up, click a view other than the original. The Optimize panel displays Index Transparency in the transparency pop-up menu. 2 Choose the Magnify tool and zoom in until you can distinguish the pixels surrounding the borders of the objects in the graphic. 3 In the Optimize panel, click the Add to Transparency button. The pointer changes to an eyedropper. 4 Click the off-color pixels that form the halo to make them transparent.
<url>html/07Color2.html</url>
<title>Choosing colors as you draw</title> Choosing colors as you draw When you want to choose a new color as you create graphics, use the Swatches panel. The Swatches panel contains color swatches from which you can choose as you draw. Swatches panel To open the Swatches panel: Choose Window > Swatches. The colors in the Swatches panel also appear in the color well pop-up menus in the Stroke and Fill panels, Color Mixer, and the Toolbox. Color wells in the Toolbox Color well pop-up menu To open a color well pop-up menu: Click the arrow next to the color well.
<url>html/07Color3.html</url>
<title>Applying colors from the Swatches panel</title> Applying colors from the Swatches panel You can use the Swatches panel to apply colors to the stroke or fill of path objects. To apply a color to a selected object: 1 Click any color well for the appropriate attribute to make it active. 2 Choose a color: In the Swatches panel, click a swatch to apply the color to the stroke or fill of the selected object and to assign that color to the active color well. Open the color well pop-up menu and click a swatch.
<url>html/07Color4.html</url>
<title>Applying colors from the color well pop-up menu</title> Applying colors from the color well pop-up menu You can use the color well pop-up menu to apply colors to the stroke or fill of path objects. To apply a color to a selected object: Choose a color swatch from the stroke or fill color well pop-up menu. Type a color's hexadecimal value in the value text box in the stroke or fill color well pop-up menu.
<url>html/07Color5.html</url>
<title>Applying colors from anywhere onscreen</title> Applying colors from anywhere onscreen Use the Eyedropper button from a color well pop-up menu to take a color from anywhere on your screen, including an open Fireworks document, and apply it to selected objects. Eyedropper button To apply a color from anywhere on the screen to a selected object: 1 Open a stroke, fill, or effect color well pop-up menu. 2 Click the Eyedropper button in the color well pop-up menu. The pointer changes to an eyedropper. 3 Choose a color: In Windows, hold down the mouse button, drag the eyedropper anywhere onscreen the color, and release. On the Macintosh, click anywhere onscreen. The color is applied to the selected object. Note: To constrain the color to a Websafe color, hold down the Shift key.
<url>html/07Color6.html</url>
<title>Customizing the Swatches panel</title> Customizing the Swatches panel You can add, delete, replace, and sort color swatches in the Swatches panel. These changes update in the color well pop-up menus. You can also add and delete entire swatch groups. For information, see Changing swatch groups . Note: Choosing Edit > Undo does not undo swatch additions or deletions. To add a color from a Fireworks document to the Swatches panel: 1 Choose the Eyedropper tool from the Toolbox. 2 Hold down Alt (Windows) or Option (Macintosh) and click the color you want to add. To add a color from anywhere onscreen to the Swatches panel: 1 Click the Eyedropper button in the stroke or fill color well pop-up menu. 2 Click anywhere onscreen, including in another Fireworks document, to choose a color. 3 In the Swatches panel, move the pointer to the open space after the last swatch. The pointer becomes the paint bucket pointer. 4 Click to add the swatch. To replace a swatch with another color: 1 With an eyedropper, click a color. The color is applied to any selected object and becomes the active stroke or fill color. 2 Hold down Shift and point to a swatch in the Swatches panel. The pointer becomes the paint bucket pointer. 3 Click the swatch to replace it with the new color. To delete a swatch from the Swatches panel: 1 Hold down Control (Windows) or Command (Macintosh) and point to a swatch. The pointer becomes the scissors pointer. 2 Click the swatch to delete it from the Swatches panel. To clear the entire Swatches panel: Choose Clear Swatches from the Swatches panel Options pop-up menu. To return to the default color swatches: Choose Web 216 palette from the Swatches panel Options pop-up menu. To sort the swatches by color: Choose Sort by Color from the Swatches panel Options pop-up menu.
<url>html/07Color7.html</url>
<title>Changing swatch groups</title> Changing swatch groups Sometimes you may want to use another swatch group or create your own. Fireworks lets you choose from these swatch groups: Web 216 Palette, Macintosh System colors, Windows System colors, Grayscale, and custom swatch groups you import from ACT or GIF files. Use the Swatches panel to choose a swatch group. Swatches panel Options pop-up menu To choose a swatch group: Choose a swatch group from the Swatches panel Options pop-up menu. To choose a custom swatch group: 1 Choose Replace Swatches from the Swatches panel Options pop-up menu. The Open dialog box appears. 2 Navigate to the folder and choose a file. 3 Click Open. The color swatches in the custom swatch group replace the previous swatches. Note: For information on creating a custom swatch group, see Saving palettes . To append a swatch group to the current swatches in the Swatches panel: 1 Choose Add Swatches from the Swatches panel Options pop-up menu. The Open dialog box appears. 2 Navigate to the folder and choose a swatch group file, and click OK. Fireworks adds swatches from either of two types of files: Photoshop ACT or GIF files. The new swatches are appended to the end of the current swatches. To save a custom color swatch group: 1 Choose Save Swatches from the Swatches panel Options pop-up menu. The Save As dialog box opens. 2 Name the new swatch group, and click Save.
<url>html/07Color8.html</url>
<title>Creating colors</title> Creating colors Create your own colors and apply them to objects, add them to the Swatches panel, or use them to make a new swatch group. Creating colors in the Color Mixer Use the Color Mixer to view the values of the active color and create new colors. You can create your own colors using any of these color models: RGB, Hexadecimal, HSB, CMY, and Grayscale. By default, the Color Mixer identifies colors as Hexadecimal RGB, displaying color values using red (R), green (G), and blue (B) color components. RGB values are calculated based on a range from 00 to FF. Choose To express color components as RGB Values of Red, Green, and Blue, where each component has a value from 0 to 255. 0-0-0 is black and 255-255-255 is white. Hexadecimal Values of Red, Green, and Blue, where each component has a hexadecimal value of 00 to FF. 00-00-00 is black and FF-FF-FF is white. HSB Values of Hue, Saturation, and Brightness, where Hue has a value from 0 to 360 degrees, and Saturation and Brightness have a value from 0 to 100%. CMY Values of Cyan, Magenta, and Yellow, where each component has a value from 0 to 255. 0-0-0 is white and 255-255-255 is black. Grayscale A percentage of black. The single Black (K) component has a value of 0 to 100%, where 0 is white and 100 is black, and in between are shades of gray. You can choose alternative color models from the Color Mixer Options pop-up menu. The current color's component values change with each new color model. To cycle the color bar through the color models: In the Color Mixer, hold down Shift and click the color bar at the bottom of the Color Mixer. The options in the Color Mixer do not change. Note: When the Hexadecimal color bar appears, color choices are restricted to the Web 216 Palette. To apply a color from the color bar to a selected object: 1 In the Color Mixer, click the stroke or fill color well to make it the active well. 2 Move the pointer over the color bar. The pointer becomes the eyedropper pointer. 3 Click to pick a color. The color is applied to the selected object and becomes the active stroke or fill color. To create a color in the Color Mixer: 1 To prevent unwanted object editing as you mix colors, deselect all objects before mixing a color. 2 Click either the stroke or fill color well to make it the destination for the new color. 3 Choose a color model from the Color Mixer Options pop-up menu. 4 Specify color component values: Enter values in the color component text boxes. Use the pop-up sliders. Pick a color from the color bar. You can add the color to the Swatches panel for reuse.
<url>html/07Color9.html</url>
<title>Creating colors using system color pickers</title> Creating colors using system color pickers You can create colors using the Windows Color dialog box (Windows) or the Apple Color Picker (Macintosh). Using a system color picker bypasses the Color Mixer and Swatches panel. To display the system color picker: Double-click any color well. Click the system color picker button from the color well swatches pop-up menu.
<url>html/08Text1.html</url>
<title>Overview: Using text</title> Overview: Using text Fireworks has many text features typically reserved for sophisticated desktop publishing applications. You can create type in a variety of fonts and sizes, and adjust kerning, spacing, color, leading, baseline shift, and more. Combining Fireworks text editing features with the wide range of strokes, fills, effects, and styles makes text a lively element of your graphic designs. The ability to edit text anytime—even after you apply Live Effects such as drop shadows and bevels—means you can easily correct misspellings, or copy objects with text and change text on each copy. Vertical text, transformed text, text attached to paths, and text converted to paths or images extend the design possibilities. You can import text while retaining Rich Text Format attributes. Also, when you import a Photoshop document containing text, the text remains editable. Fireworks handles missing fonts upon import by asking you to choose a font substitute.
<url>html/08Text10.html</url>
<title>Setting alignment</title> Setting alignment Alignment determines the position of each line of text in a paragraph relative to the left and right edges of the text block. You can align text to the left or right edges of the text block, center it within the text block, or align it to both the left and right edges of the text block (full justification). By default, text is left aligned. To achieve a stretched effect or to fit text into a specific space, you can set the alignment to stretch the text to fill the text block horizontally for horizontally oriented text or vertically for vertically oriented text. Horizontal text stretched to fill a text block Use the Text menu or Text Editor to set text alignment. You can set alignment for individual paragraphs within a text block To set alignment with the Text Editor: 1 Select the text within the text block. 2 Click the Left, Center, Right, Justified, or Stretched alignment button.
<url>html/08Text11.html</url>
<title>Applying text color</title> Applying text color By default, text takes on the active fill color and has no stroke. To set text color: Choose a color from the color well pop-up menu in the Text Editor. Select and text block and choose a color from the color well pop-up menu in the Fill panel. Double-click either color well to use the system color picker. You can apply color to the entire text block, or to specific characters within the text block.
<url>html/08Text12.html</url>
<title>Smoothing text edges</title> Smoothing text edges To smooth out a text edge, anti-alias it. The edges of the text blend into the background. This can make the text cleaner and more readable. Use the Text Editor to set anti-aliasing. Anti-aliasing applies to all characters in a given text block. To apply an anti-aliased edge to selected text: 1 Open the Text Editor. 2 From the Anti-Alias pop-up menu in the Text Editor, choose an option: Crisp, Strong, or Smooth.
<url>html/08Text13.html</url>
<title>Applying strokes, fills, effects, and styles to text</title> Applying strokes, fills, effects, and styles to text You can apply strokes, fills, effects, and styles to text, like any other object. You can apply any or all to the same text block. You can apply any style in the Styles panel to the text, even if it is not a text style. Text remains editable. Strokes, fills, effects, and styles update automatically in response to editing. Text with stroke (top), fill, effect, and style applied (bottom) For more information about strokes and fills, see Chapter 4, "Drawing Objects" and Chapter 5, "Editing Objects." For more information about Live Effects, see Chapter 9, "Applying Effects to Objects."
<url>html/08Text14.html</url>
<title>Attaching text to a path</title> Attaching text to a path To free text from the restrictions of rectangular text blocks, you can draw a path and attach text to it. The text flows along the shape of the path and remains editable. A path to which you attach text temporarily loses its stroke, fill, and effect attributes. Any stroke, fill, and effect attributes you apply subsequently are applied to the text, not the path. When you detach text from a path, the path regains its stroke, fill, and effect attributes. If text attached to an open path exceeds the length of the path, the remaining text returns and repeats the shape of the path. Text on a path returns and repeats the path shape. To place text on a path: 1 Select a text block and a path. 2 Choose Text > Attach to Path. 3 Optionally, choose Text > Orientation, then choose an orientation option from the submenu. Text rotated around path, vertical, skewed vertically, and skewed horizontally To edit text attached to a path: Double-click the text-and-path object to open the Text Editor. Choose the Text tool and select the text. To edit the shape of the path: 1 Choose Text > Detach from Path. 2 Edit the path. 3 After editing the path, select it and the text block and choose Text > Attach to Path. Horizontal text on a path, and vertical text on a path with Vertical Orientation To move the starting point of text attached to a path: 1 Select the Text on a Path object. 2 In the Object inspector, enter a value in the Text Offset text box.
<url>html/08Text15.html</url>
<title>Transforming text</title> Transforming text You can transform text blocks in the same ways you can transform other objects. You can scale, rotate, skew, and flip text to create unique text effects. You can still edit the transformed text, although severe transformations may make it difficult to read. Transforming text does not change the point size of the text. For more information, see Chapter 5, "Editing Objects."
<url>html/08Text16.html</url>
<title>Reshaping text</title> Reshaping text To reshape, erase, and otherwise manipulate text as paths using the path editing tools, you can convert it to its component path objects. Once you have converted text to paths, you can no longer edit it as text. Another useful reason for converting text to paths is if you intend to open a document containing text with an unusual font on a computer that does not have that font. Note: Converting text to paths is not necessary for viewing a particular font in a Web browser, because the text is exported to a bitmap format such as GIF. To convert selected text to paths: Choose Text > Convert to Paths. Text converted to paths retains all of its visual attributes, but you can only edit it as paths.
<url>html/08Text17.html</url>
<title>Importing text</title> Importing text You can use text from other documents by dragging and dropping or copying and pasting from the source document into the current Fireworks document. You can also open or import an entire text file in Fireworks. Fireworks can import these text formats: RTF (Rich Text Format) ASCII (plain text)
<url>html/08Text18.html</url>
<title>Importing text from Photoshop</title> Importing text from Photoshop You can open or import an entire Photoshop file, and you can copy and paste, or drag and drop text from a Photoshop file into the current Fireworks document. If you want to use only certain words or characters from another file and don't mind losing the ability to edit the text, use drag and drop or copy and paste. The text will come in as pixels and will not be editable as text. If you want the text to be editable as text, open or import the whole file. Note: The text layer retains its name. To open or import a Photoshop file: 1 Choose a a File command: Choose File > Open. Choose File > Import. 2 Navigate to the folder containing the file. 3 Choose the file and click OK.
<url>html/08Text19.html</url>
<title>Importing RTF files</title> Importing RTF files When importing RTF text, Fireworks maintains these attributes: Font, size, and style (bold, italic) Alignment (left, right, center, justified) Leading Baseline shift Range kerning Horizontal scale First character's color All other RTF information is ignored. To import RTF text: 1 Choose a a File command: Choose File > Open. Choose File > Import. 2 Navigate to the folder containing the file. 3 Choose the file and click OK. Note: Fireworks cannot import RTF text using copy and paste or drag and drop.
<url>html/08Text2.html</url>
<title>Entering text</title> Entering text Enter, format, and edit text in your graphics using the Text tool and the Text Editor. Text tool The Text Editor All text in a Fireworks document appears in a rectangle with handles, which is called a text block. To enter text: 1 Choose the Text tool. 2 Click in your document where you want the text block to begin. The Text Editor opens. 3 Choose font, size, spacing, and other text characteristics. 4 Type the text. 5 Select text in the Text Editor to format it after you type it. 6 To see text in the document as you type it in the Text Editor: Choose the Auto-Apply option in the Text Editor. Click Apply. 7 Click OK. The text appears in a text block in the Fireworks document. To open the Text Editor again: Double-click the text block. Select the text and choose Text > Editor.
<url>html/08Text20.html</url>
<title>Importing ASCII text</title> Importing ASCII text You can import ASCII text using any of the import methods. Imported ASCII text is set to the current default font, 12 pixels high, and uses the current fill color.
<url>html/08Text21.html</url>
<title>Handling missing fonts</title> Handling missing fonts If you open a document in Fireworks that contains fonts that are not installed on your computer, the Missing Fonts dialog box opens. You can choose fonts to replace the missing fonts. If you don't choose replacement fonts, the text appears in the default system font. You can edit and save the text. When the file is reopened on a computer that contains the original fonts, it remembers the original font. To select a replacement font: 1 Choose a missing font from the Change Missing Font list. 2 Choose a replacement font from the To list, and click OK. The next time you open a document with the same missing fonts, the Missing Fonts dialog box will contain the fonts you chose. To leave the missing font as is: Click No Change.
<url>html/08Text3.html</url>
<title>Moving text blocks</title> Moving text blocks You can select a text block and move it anywhere in your document, like any other object. To move a selected text block, drag it to the new location.
<url>html/08Text4.html</url>
<title>Auto-sizing text blocks</title> Auto-sizing text blocks Fireworks has auto-sizing text blocks. As you type, a text block expands. If you remove text, the text block shrinks to fit the remaining text. To control the width of wrapped text within a text block, resize it. To resize a text block, drag a resize handle.
<url>html/08Text5.html</url>
<title>Editing text</title> Editing text Within a text block, you can vary all aspects of text, including size, font, spacing, leading, and baseline shift. To change a text block's attributes, use the Text menu or the Text Editor. The Text Editor When you edit text, its stroke, fill, and effect attributes redraw accordingly. To edit text in the Text Editor: 1 Double-click the text block. The Text Editor opens. 2 In the Text Editor preview area, highlight the text you want to change. 3 Apply your changes. Note: For information about changing text attributes, see the corresponding sections in this chapter. 4 To see changes in the document as you type the text in the Text Editor: Choose the Auto-Apply option in the Text Editor. Click Apply. 5 Click OK.
<url>html/08Text6.html</url>
<title>Choosing a font, type size, and style</title> Choosing a font, type size, and style When changing the font, size, and style attributes of the text within a text block, you can use either the Text Editor or the Text menu commands. Note: To use Type 1 fonts on the Macintosh, Fireworks requires Adobe Type Manager 4 or higher. When viewing text in the Text Editor, by default, the text appears in the actual font and size. A text block can contain multiple fonts and sizes. You can view the text in the Text Editor in the system font and size. This is useful if the font or size makes it difficult to read while you are typing. To view text in the system font: Deselect Show Font in the Text Editor. To view text in the default size: Deselect Show Size & Color in the Text Editor. To change the font, type size, and style using the Text Editor: 1 In the Text Editor, select the characters you want to change. 2 To change the font, choose a font from the Font pop-up menu. 3 To change the type size, choose a size from the Size pop-up menu. 4 To apply a Bold, Italic, or Underline style, click a style button. 5 Click OK. To change the font, type size, and style using the Text menu: 1 Select the text block or blocks. You can change the attributes of more than one text block simultaneously. 2 To change the font, choose Text > Font and choose a font from the submenu. 3 To change the type size, choose Text > Size and choose a size from the submenu. 4 To change the style, choose Text > Style and choose a style from the submenu.
<url>html/08Text7.html</url>
<title>Setting baseline shift and leading</title> Setting baseline shift and leading Baseline shift determines how closely text sits above, below, or on its natural baseline. Use baseline shift to create subscript and superscript characters. Leading determines the distance between adjacent lines in a paragraph. Specifically, leading is the percentage of the point size that lines are separated baseline to baseline. Use the Text Editor to set the baseline shift and leading. To set baseline shift and leading: 1 In the Text Editor, select the characters you want to change. 2 From the Leading pop-up menu, choose a leading value. 100% is the default. 3 From the Baseline Shift pop-up menu, choose an amount to subscript or superscript the text. 4 Click OK.
<url>html/08Text8.html</url>
<title>Setting kerning</title> Setting kerning Kerning increases or decreases the spacing between certain pairs of letters to improve their appearance. Most fonts include information that automatically reduces the amount of space between certain letter pairs, such as TA or Va. By default, Fireworks uses a font's kerning information when displaying text, but you may want to turn it off at smaller point sizes, or when the text has no anti-aliasing. Range kerning increases or decreases the spacing between more than two characters. Use the Text Editor to set kerning. To disable automatic kerning: Deselect Auto-Kern. To set kerning: 1 Select characters in the Text Editor: To kern between two characters, click between them. For range kerning, highlight the characters you want to change. 2 Enter a kerning value. Zero represents normal kerning. Positive values move letters farther apart. Negative values move letters closer together.
<url>html/08Text9.html</url>
<title>Setting direction and orientation</title> Setting direction and orientation Text direction, or text flow, determines whether text flows right to left, or left to right. By default, text flows left to right. Text flowing left to right and right to left Text orientation determines whether the text block is oriented horizontally or vertically. By default, text is oriented horizontally. Horizontal and vertical orientation Use the Text menu or Text Editor to set text orientation. To set text direction, use the Text Editor. These settings apply to entire text blocks only. To set orientation for selected text blocks using the Text menu: To set text orientation to vertical, choose a command from the bottom set of commands on the Text > Align submenu. To set text orientation to horizontal, choose a command from the top set of commands on the Text > Align submenu. To set orientation using the Text Editor: Click the Horizontal Text or Vertical Text button. To set direction using the Text Editor: Click the Left to Right or Right to Left button.
<url>html/09Pixels1.html</url>
<title>Overview: Editing and painting pixels</title> Overview: Editing and painting pixels Fireworks combines the artistic richness of bitmap applications with tools previously only found in vector applications, such as FreeHand. However, you can also edit individual pixels and areas of pixels in bitmap images. Bitmap images contain tiny squares that combine like the tiles of a mosaic to create an image. These tiny squares are called pixels. An example of a bitmap image is a color photograph. Editing options include painting and drawing with traditional bitmap-application tools, changing the color of pixels, correcting and enhancing images with filters, replicating image elements with the Rubber Stamp tool, and feathering image edges. You can even apply Photoshop plug-in filters to images.
<url>html/09Pixels10.html</url>
<title>Expanding and contracting a marquee</title> Expanding and contracting a marquee Once you have drawn a marquee to select pixels, you can expand or contract the border of the marquee. To expand the border of a marquee: 1 After drawing the marquee, choose Edit > Modify Marquee > Expand. The Expand Selection dialog box opens. 2 Enter the number of pixels by which you want to expand the border of the marquee, and click OK. To contract the border of a marquee: 1 After drawing the marquee, choose Edit > Modify Marquee > Contract. The Contract Selection dialog box opens. 2 Enter the number of pixels by which you want to contract the border of the marquee, and click OK.
<url>html/09Pixels11.html</url>
<title>Selecting an area around an existing marquee</title> Selecting an area around an existing marquee You can create an additional marquee at a specified width bordering an existing marquee. This lets you create special graphics effects, such as feathering the edges of a pixel selection. Original marquee After framing with an additional marquee To select an area around an existing marquee: 1 After drawing a marquee, choose Edit > Modify Marquee > Border. The Border dialog box opens. 2 Enter the width of the marquee that you want to place around the existing marquee, and click OK.
<url>html/09Pixels12.html</url>
<title>Smoothing the border of a marquee</title> Smoothing the border of a marquee With Fireworks 3, you can eliminate excess pixels along the edges of selected pixels. This is useful if excess pixels appear along the border of a pixel selection, or marquee, after using the Magic Wand tool. A pixel selection before and after smoothing To smooth the border of a marquee: 1 Choose Edit > Modify Marquee > Smooth. The Smooth Selection dialog box opens. 2 Enter a sample radius to specify the desired degree of smoothing, and click OK.
<url>html/09Pixels13.html</url>
<title>Editing pixels</title> Editing pixels After selecting pixels, you can edit them using the Pencil, Brush, or Paint Bucket tool. Or you can clone pixels, feather image edges, erase pixels, or crop an image. Editing pixels with the pencil or brush tool You can change pixels one by one or change several pixels at once. You can also delete pixels. Pencil tool and Brush tool To edit pixels one at a time: 1 Choose the Pencil tool. 2 Choose a color in the stroke color well. 3 Click the pixel you want to change. To edit several pixels at once: 1 Select an area of pixels. 2 Choose a color in the fill color well. 3 Press Alt+Delete (Windows) or Option+Delete (Macintosh) to change the selected pixels to the color in the fill color well. Note: You can also use the Brush tool to change the selected pixels to the color in the stroke color well.
<url>html/09Pixels14.html</url>
<title>Editing pixels with the Paint Bucket tool</title> Editing pixels with the Paint Bucket tool After selecting pixels, you can also use the Paint Bucket tool to change selected pixels to the color in the fill color well. Paint Bucket tool To change selected pixels to the fill color: 1 Choose a color in the fill color well. 2 Click the Paint Bucket tool. 3 In the Paint Bucket tool Options panel, choose Fill Selection Only. 4 Click inside the selection marquee. The selected pixels change to the fill color.
<url>html/09Pixels15.html</url>
<title>Cloning portions of an image</title> Cloning portions of an image Use the Rubber Stamp tool to duplicate areas of a bitmap image. When you clone an area, two pointers appear. The blue circle indicates the area you want to clone (the source), and the rubber stamp pointer indicates where you want to place the cloned area. Rubber Stamp tool Cloning is useful when you want to fix a scratched photograph. Simply duplicate areas of the photo and place the cloned area over the scratch. Rubber Stamp pointers To clone portions of a bitmap image: 1 Click the Rubber Stamp tool. 2 In the tool Options panel, choose a Source option: Fixed locks the source pointer (the blue circle) to a specific area of the image so you can duplicate the area more than once. The stamp pointer moves independently of the circular source pointer. Aligned unlocks the source pointer so you can duplicate different areas of the image. The two pointers move together. 3 Choose a Sample option: Image lets you clone from the selected image only. Document allows you to clone any area of the document, including any existing path objects. 4 In the Stamp Size pop-up menu, drag the slider to set the size of the Rubber Stamp. 5 In the Edge Softness preview, drag the slider to adjust the softness of the Rubber Stamp tool's edge. 6 Move the pointer to the area you want to clone, and click the mouse button. 7 Move the Rubber Stamp pointer to the area where you want to place the clone, and click the mouse button. Note: To reposition the source pointer, hold down Alt (Windows) or Option (Macintosh) while clicking with the Rubber Stamp tool.
<url>html/09Pixels16.html</url>
<title>Feathering image edges</title> Feathering image edges Feathering a selection does not blur the pixels in the image. It blurs the edges of the selection marquee only. This is useful when you want to remove an object from a photo. Feathering helps a copied area blend with the surrounding pixels. To feather the edges of a pixel selection: 1 Choose the Marquee tool and select an area of pixels. 2 Choose Edit > Feather to open the Feather Selection dialog box. 3 Type a value to set the feather radius, and click OK. The radius value determines the number of pixels that are blurred on each side of the selection border.
<url>html/09Pixels17.html</url>
<title>Erasing pixels</title> Erasing pixels Use the Eraser tool to remove pixels or color over pixels with a different color. Eraser tool To erase pixels: 1 Double-click the Eraser tool to open the Eraser tool Options panel. 2 Set the eraser color in the Erase To pop-up menu: Transparent sets the eraser as transparent. Fill Color selects the color in the fill color well. Stroke Color selects the color in the stroke color well. Canvas Color selects the canvas color of the document. 3 Choose a round or square eraser. 4 Drag the Edge Softness slider to set the softness of the eraser's edge. 5 Drag the Eraser Size slider to set the size of the eraser. 6 Drag the Eraser tool over the pixels you want to erase or paint over with a different color.
<url>html/09Pixels18.html</url>
<title>Cropping an image</title> Cropping an image Use Edit > Crop Selected Image to cut portions from an image. For example, you might have a photograph that was taken from too far away. You can remove elements in the background but retain the subject in the photo. Crop tool To crop an image: 1 Choose Edit > Crop Selected Image. The crop handles appear. 2 Adjust the crop handles until the bounding box surrounds the area of the image that you want to keep: Drag the handles Hold down Shift and use the arrow keys. 3 Double-click inside the bounding box or press Enter to crop the image. Everything outside the bounding box is removed. Press Esc to cancel the crop command.
<url>html/09Pixels19.html</url>
<title>Painting pixels</title> Painting pixels Just as you can edit individual pixels with the Pencil and Brush tools, you can also paint bitmap lines and brush strokes with these tools. However, drawing in image edit mode is different from drawing in object mode. In object mode, the drawing tools create an editable path object that contains paths and points. When you edit the object, bitmap strokes, fills, and effects redraw automatically. You can also change strokes and fills. In image edit mode, the drawing tools change pixels. You cannot edit your work as if working with path objects. For more information on editing path objects with paths, see Editing strokes and Changing stroke and fill colors . To paint lines or brush strokes: 1 Choose the Pointer tool and double-click the image on which you want to paint pixel lines or brush strokes. 2 Choose the Pencil tool or the Brush tool. 3 Choose a color in the stroke and fill color wells. 4 Choose options in the Stroke panel for the width and look of the line or brush stroke. Note: If you paint lines and strokes that enlarge a bitmap image, its size is automatically trimmed after leaving image edit mode. It is trimmed to a rectangular shape in the size of the used pixels, removing transparent space around the image.
<url>html/09Pixels2.html</url>
<title>Understanding image edit mode</title> Understanding image edit mode When you double-click a bitmap image, Fireworks changes to image edit mode. You can see that Fireworks is in image edit mode by the striped border that appears around the entire document. When the border is visible, you can paint or edit pixels anywhere within the document. A striped border outlines the canvas in image edit mode. Image edit mode is where you edit pixels. Drawing and editing in image edit mode is irreversible except for undoing commands using Edit > Undo or the History panel. You cannot draw path objects in image edit mode. Bitmap images such as photographs do not contain paths that let you reshape the image by moving a point on the path. Each pixel is what you see. For more information on editing objects with paths and points, see Reshaping paths by editing points . A vector object with a path and points, and a bitmap image composed entirely of pixels.
<url>html/09Pixels20.html</url>
<title>Blending mode behavior in image edit mode</title> Blending mode behavior in image edit mode Blending modes behave differently depending on whether you are in object mode or image edit mode. In object mode, a blending mode affects the selected object. In image edit mode, blending mode behaves in these ways: A blending mode affects the floating selection of pixels. A blending mode affects the brushes and fills of subsequently drawn pixels when there is not a floating selection. For more information on blending modes, see Understanding blending modes .
<url>html/09Pixels21.html</url>
<title>Using filters and plug-ins</title> Using filters and plug-ins Filters on the Xtras menu help improve and enhance your images. Fireworks includes many new image editing filters. You can adjust the contrast and brightness, the hue and color saturation, and the tonal range. In addition, you can blur or sharpen an image and give an image a unique look by colorizing it or inverting the colors. But you are not limited to these filters. You can also add Photoshop plug-ins to the Xtras menu. The filters on the Xtras menu are used primarily for bitmap images, such as a photograph. However, you can also apply them to path objects. Applying an Xtra filter to a path object converts the object to an image. Filters and plug-ins applied using the Xtras menu are reversible only if the Undo command is available. Use the Xtras menu to apply filters when you are sure you do not want to edit or reverse the filters. For instance, if you adjust the contrast and brightness to improve an image, it is unlikely that you will need to edit or remove the filter.
<url>html/09Pixels22.html</url>
<title>Using filters and plug-ins as Live Effects</title> Using filters and plug-ins as Live Effects In Fireworks 3, you can apply built-in filters on the Xtras menu and Photoshop plug-ins to an image using the Effect panel, making them Live Effects. For more information about using filters and Photoshop plug-ins as Live Effects, see Using Photoshop plug-ins as Live Effects and Using Fireworks Xtras as Live Effects .
<url>html/09Pixels23.html</url>
<title>Adjusting brightness or contrast</title> Adjusting brightness or contrast The Brightness/Contrast filter modifies the contrast or the brightness of all pixels in an image. Using this command affects the highlights, shadows, and midtones of an image. The Brightness/Contrast filter is for images that do not need substantial correction. For more advanced tonal correction procedures, see Adjusting the tonal range with Levels and Adjusting the tonal range using Curves . Original After adjusting the brightness To adjust the brightness or contrast: 1 Select the image in either object mode or image edit mode. 2 Choose Xtras > Adjust Color > Brightness/Contrast. The Brightness/Contrast dialog box opens. 3 Choose Preview to view your changes in the workspace. As you apply changes, the image updates automatically. 4 Drag the Brightness and Contrast sliders to adjust the settings. Values range from -100 to 100. 5 Click OK.
<url>html/09Pixels24.html</url>
<title>Adjusting the hue or saturation</title> Adjusting the hue or saturation Use Hue/Saturation to adjust the color, the purity of the color, and the lightness of the color in an image. Original After adjusting the saturation To adjust the hue or saturation: 1 Select the image in either object mode or image edit mode. 2 Choose Xtras > Adjust Color > Hue/Saturation. The Hue/Saturation dialog box opens. 3 Choose Preview to view your changes in the workspace. As you apply changes, the image updates automatically. 4 Choose Colorize to change an RGB image to a two-tone image, or to add color to a grayscale image. If you choose Colorize, the value range of the Hue and Saturation sliders changes. Hue changes to 0 to 360. Saturation changes to 0 to 100. 5 Drag the Saturation slider to adjust the purity of the colors. Values range from -100 to 100. 6 Drag the Hue slider to adjust the color of the image. Values range from -180 to 180. 7 Drag the Lightness slider to adjust the lightness of the colors. Values range from -100 to 100. 8 Click OK.
<url>html/09Pixels25.html</url>
<title>Adjusting the tonal range with Levels</title> Adjusting the tonal range with Levels Use the Levels feature to correct images with a high concentration of pixels in the highlights or shadows. An image with a full tonal range should have a high number of pixels in all areas: the highlights, the midtones, and the shadows. The Levels filter sets the darkest pixels (the shadows) and the lightest pixels (the highlights) as black and white, and then redistributes the midtones proportionally. This produces an image with the sharpest detail in all of its pixels. Original with pixels concentrated in the highlights After adjusting image with Levels Use the Histogram in the Levels dialog box to view the pixel distribution of an image. The Histogram is a graphical illustration of the distribution of pixels in the highlights, midtones, and shadows of an image. The Histogram appears in the Levels dialog box. Histogram Use the Histogram to determine the best method of correcting an image's tonal range. A high concentration of pixels in the shadows or highlights indicates that you could improve the image by applying the Levels or Curves features. The x-axis illustrates the color values from the darkest (0) to the brightest (255). Read the x-axis from left to right; the left depicts the darker pixels and the right depicts the brighter pixels. The y-axis depicts the number of pixels at each brightness level. To adjust highlights and shadows: 1 Select the image in either object mode or image edit mode. 2 Choose Xtras > Adjust Color > Levels. The Levels dialog box opens. 3 Choose Preview to view your changes in the workspace. As you make changes, the image updates automatically. 4 From the Channel pop-up menu, choose whether you want to apply changes to individual colors or to all color channels. 5 Drag the Input Levels sliders under the Histogram to adjust the highlights and shadows. The slider on the right adjusts the highlights using values from 255 to 0; the slider on the far left adjusts the shadows using values from 0 to 255. As you move the sliders, the values are automatically entered in the Input Levels boxes. Note: The shadow value cannot be higher than the highlight value, and the highlight value cannot be less than the shadow value. 6 Drag the Output Levels sliders to adjust the contrast values in the image. Drag the right slider to adjust the highlights using values from 255 to 0, and drag the left slider to adjust the shadows from 0 to 255. As you move the sliders, the values are automatically entered in the Output Levels boxes. For information on using the eye dropper buttons to adjust the tonal range, see Adjusting the tonal range with the eyedroppers .
<url>html/09Pixels26.html</url>
<title>Adjusting the tonal range automatically</title> Adjusting the tonal range automatically Using the Auto Levels filter, you can automatically define the lightest and darkest pixels in an image. The Auto Levels filter is exactly the same as the Levels filter except Fireworks does the work for you. To adjust highlights and shadows automatically: 1 Select the image in either object mode or image edit mode. 2 Choose Xtras > Adjust Color > Auto Levels. Note: You can also adjust the highlights and shadows automatically by clicking the Auto button in the Levels or Curves dialog box.
<url>html/09Pixels27.html</url>
<title>Adjusting the tonal range using Curves</title> Adjusting the tonal range using Curves The Curves feature is similar to Levels. Both features let you adjust the tonal range of an image. Whereas Levels uses the highlights, shadows, and midtones to correct the tonal range, Curves lets you adjust any color along the tonal range (from the darkest pixels to the lightest pixels) without affecting other colors. The grid in the Curves dialog box depicts these brightness values: The horizontal axis depicts the original brightness of the pixels (shown in the Input box). The vertical axis represents the new brightness values (shown in the Output box). When you first open the Curves dialog box, the diagonal line indicates that no changes have been made, so the input and output values are the same for all pixels. To adjust a specific point in the tonal range: 1 Select the image in either object mode or image edit mode. 2 Choose Xtras > Adjust Color > Curves. The Curves dialog box opens. 3 Choose Preview to view your changes in the workspace. As you make changes, the image updates automatically. 4 From the Channel pop-up menu, choose whether you want to apply changes to individual colors or to all color channels. 5 Click a point on the grid's diagonal line, and drag it to a new position to adjust the curve. The horizontal axis corresponds to the Input value (the original brightness of the pixels). The vertical axis corresponds to the Output value (the adjusted brightness of the pixels). Each point on the curve has its own Input and Output values. When you drag a point, the Input and Output values update automatically. The diagonal line displays brightness values of 0 to 255, with 0 representing the shadows. Diagonal line after dragging a point to adjust the curve. For information on using the dropper buttons to adjust the tonal range, see Adjusting the tonal range with the eyedroppers . Note: Clicking the Auto button yields the same result as clicking the Auto button in the Levels dialog box. To delete a point along the curve: Drag the point off the grid. Note: You cannot delete the endpoints of the curve.
<url>html/09Pixels28.html</url>
<title>Adjusting the tonal range with the eyedroppers</title> Adjusting the tonal range with the eyedroppers You can also adjust the highlights, shadows, and midtones using the shadow, highlight, or midtone eyedropper button in the Levels or Curves dialog box. For example, you might have an image that contains a lot of white and is therefore washed out in appearance. Click the highlight eyedropper, and then click a pixel in the image that is not as white. The highlight in the image is remapped to the new color, giving the picture more contrast. To adjust the tonal range using an eyedropper: 1 Open the Levels or Curves dialog box, and choose a color from the Channel pop-up menu. 2 Choose the appropriate eyedropper: Highlight eyedropper (eyedropper with white ink) resets the highlight value. Shadow eyedropper (eyedropper with black ink) resets the shadow value. Midtone eyedropper (eyedropper with gray ink) resets the midtone value. 3 Click a pixel in the image and click OK.
<url>html/09Pixels29.html</url>
<title>Inverting an image's color values</title> Inverting an image's color values Use Invert to change each color in an object or image to its inverse. For example, applying Invert to a red image object (R=255, G=0, B=0) changes the color to light blue (R=0, G=255, B=255). Original After inverting To invert colors: 1 Select an object or bitmap image. 2 Choose Xtras > Adjust Color > Invert.
<url>html/09Pixels3.html</url>
<title>Creating bitmap images</title> Creating bitmap images You can create bitmap images by importing them, by converting path objects to image objects, or by drawing and painting in image edit mode. For more information about importing images, see Creating Fireworks documents by importing . Note: When you open a bitmap image file such as a JPEG in Fireworks, it opens in image edit mode. You can convert selected objects that contain paths into a single image object. You can convert selected path objects and text into a single image object. You can also convert any number of selected bitmap images to a single image object. A path-to-image conversion is irreversible, except when Edit > Undo is still an option. Images cannot be converted to path objects. To convert selected objects to a bitmap image: Choose Modify > Merge Images. To create a new image object by drawing and painting: 1 Choose Insert > Empty Image. 2 Choose an image edit tool and begin drawing or painting. To create a new image object using the Marquee or Lasso tool: Click an empty area in the document with the Marquee or Lasso tool.
<url>html/09Pixels30.html</url>
<title>Blurring an image</title> Blurring an image Use the Blur commands to blur the pixels in bitmap images. Blur options include: Blur, Blur More, and Gaussian Blur. Blur More blurs about three times as much Blur. Gaussian Blur applies a weighted average of blur to each pixel to produce a hazy effect. Before using Gaussian Blur After using Gaussian Blur To blur an image: 1 Select an image in either object mode or image edit mode. 2 Choose a blur option: Xtras > Blur > Blur Xtras > Blur > Blur More To blur an image using Gaussian Blur: 1 Select the image in either object mode or image edit mode. 2 Choose Xtras > Blur > Gaussian Blur. The Gaussian Blur dialog box opens. 3 Choose Preview to view your changes in the workspace. As you make changes, the image updates automatically. 4 Drag the Blur Radius slider to set the strength of the blur effect. Values range from 0.1 to 250. An increase in radius results in a stronger blur effect. 5 Click OK.
<url>html/09Pixels31.html</url>
<title>Using the Convert to Alpha filter</title> Using the Convert to Alpha filter Use the Convert to Alpha filter to convert an object or text into a gradient transparency based upon the transparency of the image. Original After converting to alpha To convert an object to an alpha: 1 Select an object or text object. 2 Choose Xtras > Other > Convert to Alpha.
<url>html/09Pixels32.html</url>
<title>Changing color transitions to lines</title> Changing color transitions to lines Use Find Edges to identify the parts of an image that are color transitions. Find Edges changes the color transitions to lines. In bitmap images, Find Edges creates the look of a sketch. Original After applying Find Edges To change color transitions to lines: 1 Select an object or image. 2 Choose Xtras > Other > Find Edges.
<url>html/09Pixels33.html</url>
<title>Sharpening an image</title> Sharpening an image Use the Sharpen filter to correct images that are blurry. The Sharpen command includes three options: Sharpen, Sharpen More, and Unsharp Mask. Sharpen adjusts the focus of a blurred image by increasing the contrast of adjacent pixels. Sharpen More increases the contrast of adjacent pixels about three times as much as Sharpen. Unsharp Mask sharpens an image by adjusting the contrast of the image edges. Unsharp Mask offers the most control, so it is usually the best option for sharpening an image. Original After sharpening To sharpen an image: 1 Select the image in either object mode or image edit mode. 2 Choose a sharpen option: Xtras > Sharpen > Sharpen Xtras > Sharpen > Sharpen More Note: If you sharpen too much, you may degrade the image. To sharpen an image using Unsharp Mask: 1 Select the image in either object mode or image edit mode. 2 Choose Xtras > Sharpen > Unsharp Mask. The Unsharp Mask dialog box opens. 3 Choose Preview to view how your changes affect the image. 4 Drag the Sharpen Amount slider to select the amount of sharpening effect from 1 to 500 percent. 5 Drag the Pixel Radius slider to select a radius from 0.1 to 250. An increase in radius results in a greater area of sharp contrast surrounding each pixel edge. 6 Drag the Threshold slider to select a threshold of 0 to 255. Values between 2 and 25 are the most commonly used values. An increase in threshold sharpens only those pixels of a higher contrast in the image. A decrease in threshold includes pixels of lower contrast. A threshold of 0 sharpens all pixels in the image. 7 Click OK.
<url>html/09Pixels4.html</url>
<title>Switching to image edit mode</title> Switching to image edit mode You must switch to image edit mode to edit pixels in the bitmap you imported or created. You can easily change image edit mode settings. To switch to image edit mode: Double-click the image using the Pointer tool. Select the image object, and choose Modify > Image Object. Click an image object with any of these tools: Marquee, Ellipse Marquee, Lasso, Polygon Lasso, Magic Wand, Eraser, or Rubber Stamp. To temporarily hide the striped border: Choose View > Hide Edges. Leaving image edit mode turns off Hide Edges. To prevent the striped border from surrounding the entire document: Choose File > Preferences, click the Editing tab, and deselect Expand to Fill Document. This is helpful if a document contains small bitmap images and you want the striped border to surround the selected image only. To return to object mode from image edit mode: Choose any selection tool and double-click on an area outside the image. Double-click an area of the document window beyond the canvas with any selection tool. Click the Stop button located on the Status bar (Windows) or at the bottom of the document window (Macintosh). Stop pointer and Stop button Choose Modify > Exit Image Edit. Press Control+Shift+D (Windows) or Command+Shift+D (Macintosh). Press the Esc key. When you leave image edit mode, the excess empty space is trimmed off the edges of the image object.
<url>html/09Pixels5.html</url>
<title>Selecting pixels</title> Selecting pixels When you make a selection in image edit mode, you are selecting pixels. Moving selected pixels creates a floating selection of pixels. You can move a floating selection anywhere inside the striped border. When you select other pixels or exit image edit mode, the pixels are permanently placed in the new location.
<url>html/09Pixels6.html</url>
<title>Using the image edit selection tools</title> Using the image edit selection tools In image edit mode, the primary selection tools are the Marquee and Ellipse Marquee tools, the Lasso and Polygon Lasso tools, and the Magic Wand tool. Marquee tools Lasso and Magic Wand tools Use these tools to highlight an area of pixels to edit, move, cut, or copy. Each tool draws a marquee that appears as a flickering dotted shape. For information about setting the tool options, see Choosing tool options . To remove a marquee: Draw another marquee or click outside the current selection with a marquee or lasso tool. Choose Edit > Deselect. Exit image edit mode. To select a rectangular area of pixels: 1 Choose the Marquee tool. 2 In the Marquee tool Options panel, choose Style and Edge options. See Choosing tool options . 3 Drag diagonally to select the pixels. To select an elliptical area of pixels: 1 Choose the Ellipse Marquee tool. 2 In the Marquee tool Options panel, choose Style and Edge options as described in Choosing tool options . 3 Drag diagonally to select the pixels. Note: Hold down Shift to draw square or circular marquees. Hold down Alt (Windows) or Option (Macintosh) to draw from the center. To select a freeform area of pixels: 1 Choose the Lasso tool. 2 In the Lasso tool Options panel, choose an Edge option as described in Choosing tool options . 3 Drag the pointer around the pixels you want to select. To select a polygonal area of pixels: 1 Choose the Polygon Lasso tool. 2 In the Lasso tool Options panel, choose an Edge option as described in Choosing tool options . 3 Click to outline the selection. 4 Close the polygon: Click the starting point Double-click in the workspace with the Polygon tool. Note: Hold down Shift to constrain polygon lasso lines to 45-degree increments. To select an area of pixels of similar colors: 1 Choose the Magic Wand tool. 2 In the Magic Wand tool Options panel, choose an Edge option and set the tolerance level by dragging the tolerance slider. See Choosing tool options . 3 Click the area of color you want to select. A flickering border appears around the selected range of pixels. Note: Tolerance sets the range of colors that are selected when you click a pixel with the Magic Wand. If you enter 0 and click a pixel, only adjacent pixels of the exact same color are selected. If you enter 65, a range of related colors is selected. Pixels selected with tolerance set to 87 To select similar colors using Select Similar: 1 Choose a Marquee or Lasso tool, and drag diagonally to choose an area of color you want to select. 2 Choose Edit > Select Similar. A flickering border appears around the selected range of pixels. The current tolerance setting in the Magic Wand tool Options panel determines the range of similar colors that are selected.
<url>html/09Pixels7.html</url>
<title>Choosing tool options</title> Choosing tool options After choosing a Marquee tool, a Lasso tool, or the Magic Wand tool, the tool Options panel displays options that are specific to the chosen tool. Edge options are available for all pixel selection tools: Hard creates a marquee selection with a defined edge. Anti-alias prevents jagged edges in the marquee selection. Feather lets you feather the edge of the pixels you select. Style options are available for the Marquee tools only: Normal lets you create a marquee in which the height and width are independent. Fixed Ratio constrains the height and width to defined ratios. Fixed Size constrains the height and width to a set dimension.
<url>html/09Pixels8.html</url>
<title>Adjusting a selection marquee</title> Adjusting a selection marquee After selecting pixels with the Marquee or Lasso tool, you can edit the marquee. You can manually add or delete pixels from a marquee border using modifier keys. You can also expand or contract the marquee border by a specified amount, smooth the border of the marquee, or select an additional area of pixels around the existing marquee.
<url>html/09Pixels9.html</url>
<title>Adding or removing pixels using modifier keys</title> Adding or removing pixels using modifier keys Using modifier keys, you can add or delete pixels from the flickering marquee border. You can also select pixels at the intersection of two overlapping marquee selections. To add pixels to a marquee selection: Hold down Shift and select the pixels you want to add. Note: You can also create an additional marquee selection using the Shift key. While holding down the Shift key, create a marquee selection that does not overlap the original marquee border. To delete pixels from a marquee selection Hold down Alt (Windows) or Option (Macintosh) and select the pixels you want to delete. To select pixels where two marquee borders intersect: 1 Hold down Alt+Shift (Windows) or Option+Shift (Macintosh) while creating a new marquee selection that overlaps the original marquee border. 2 Release the mouse button. Only the pixels at the intersection of the two marquees are selected. Rectangular marquee overlapping original marquee Resulting pixel selection
<url>html/10Effects1.html</url>
<title>Overview: Applying effects to objects</title> Overview: Applying effects to objects With the wide selection of Fireworks strokes and fills, you can create all kinds of compelling graphics for your Web site. But what about wrapping a bevel edge around your buttons for a raised look? Or a soft glow emanating from a picture? Or a subtle drop shadow to add depth to text? These and many other effects are easy to apply in Fireworks. Plus, you can apply effects to an object with only one visit to the Effect panel. You can edit or remove Live Effects as easily as you apply them. The best thing about Fireworks effects is that they are live, which means they redraw when you edit the objects they are applied to. As if that isn't enough, in Fireworks 3 you can use Xtras filters, such as Gaussian Blur and Sharpen, as Live Effects. Many Photoshop plug-ins now have all the flexibility of Live Effects. For more information, see Using Photoshop plug-ins as Live Effects .
<url>html/10Effects10.html</url>
<title>Applying effects to grouped objects</title> Applying effects to grouped objects When you apply an effect to a group, the effect is applied to all objects in the group. If the objects are ungrouped, each object reverts to any effect settings applied to the object individually. You can apply an effect to an object within a group by selecting only that object. For information on selecting a group or objects within a group, see Selecting grouped objects .
<url>html/10Effects11.html</url>
<title>Using standard Live Effects</title> Using standard Live Effects With Fireworks, you can create Web effects, such as bevels, drop shadows, glows, and embossing. You can customize each effect to get exactly the look you want. Effect settings can be changed anytime. When you choose the Bevel, Emboss, Shadow, or Glow effect, a pop-up edit window appears in the Effect panel so you can adjust the effect settings. The options on the pop-up edit window change depending upon the effect you choose. Experiment with the settings until you get the look you want. If you want to change the effect settings later, see Editing Live Effects . Inner Bevel pop-up edit window
<url>html/10Effects12.html</url>
<title>Applying beveled edges</title> Applying beveled edges Applying a beveled edge to a button creates a raised look for buttons on your Web site. You can create an inner bevel or an outer bevel. Inner Bevel and Outer Bevel To apply a beveled edge to a selected object: 1 In the Effect panel, choose a Bevel option: Emboss > Inner Bevel Bevel and Emboss > Outer Bevel The pop-up edit window opens. 2 Edit the effect settings in the pop-up edit window. When you have finished, click outside the edit window or press Enter to close it. If you chose Outer Bevel, choose the color of the bevel. In the Button Preset pop-up menu, choose an effect preset for buttons. See Using bevel effects to draw button states for more information on button preset options.
<url>html/10Effects13.html</url>
<title>Applying embossing effects</title> Applying embossing effects Use the Emboss effect to make an image appear raised or inset from its background. You can apply an inset emboss effect or a raised emboss effect. Inset Emboss and Raised Emboss on blue canvas To apply an emboss effect: 1 Open the pop-up menu at the top of the Effect panel to view a list of available effects. 2 Choose an Emboss effect: Bevel and Emboss > Inset Emboss Bevel and Emboss > Raised Emboss The pop-up edit window opens. 3 Edit the effect settings in the pop-up edit window. 4 When you have finished, click outside the edit window or press Enter to close it.
<url>html/10Effects14.html</url>
<title>Applying shadows and glows</title> Applying shadows and glows Fireworks makes it easy to apply drop shadows, inner shadows, and glows to objects. You can specify the angle of the shadow to simulate the angle of the light shining on the object. Drop Shadow and Inner Shadow effects Glow effect To apply a shadow or inner shadow: 1 Open the pop-up menu at the top of the Effect panel to view a list of available effects. 2 Choose a shadow option: Shadow and Glow > Drop Shadow Shadow and Glow > Inner Shadow The pop-up edit window opens. 3 Edit the effect settings in the pop-up edit window. Drag the distance slider to set the distance of the shadow from the object. Drag the Opacity slider to set the degree of transparency in the shadow. Select Knock Out to hide the object and display the shadow only. 4 When you have finished, click outside the edit window or press Enter to close it. To apply a glow: 1 Open the pop-up menu at the top of the Effect panel to view a list of available effects. 2 Choose Shadow and Glow > Glow. The pop-up edit window opens. 3 Edit the effect settings in the pop-up edit window. Drag the Offset slider to specify the distance of the glow from the object. Drag the Opacity slider to set the transparency of the glow. 4 When you have finished, click outside the edit window or press Enter to close it.
<url>html/10Effects15.html</url>
<title>Using Photoshop plug-ins as Live Effects</title> Using Photoshop plug-ins as Live Effects When you install a Photoshop plug-in in Fireworks, it is added to the Xtras menu and to the Effect panel. Use the Xtras menu to apply Photoshop plug-ins only when you are certain that you will not want to edit or remove the effect from an object. Use the Effect panel to apply Photoshop plug-ins as Live Effects. (Some Photoshop plug-ins cannot be used as Live Effects.) Note: When sharing a Fireworks file in which a Photoshop plug-in is applied as a Live Effect, the recipient must have the plug-in installed to view the effect. Fireworks built-in effects, however, are saved with the Fireworks file and the recipient does not need to install an additional file to view the effect. To install Photoshop plug-ins: 1 In the Effect panel Options pop-up menu, choose Locate Plug-ins. The Select the Photoshop Plugins folder dialog box opens. 2 Navigate to the folder where the Photoshop plug-ins are installed, and click OK. 3 Restart Fireworks to load the plug-ins. Note: If you move the plug-ins to a different folder, repeat the above steps, or choose File > Preferences, and click the Folders tab to change the path to the plug-ins. Then restart Fireworks. To apply a Photoshop plug-in to a selected object as a Live Effect: Choose the plug-in from the Effect pop-up menu in the Effect panel.
<url>html/10Effects16.html</url>
<title>Using Fireworks Xtras as Live Effects</title> Using Fireworks Xtras as Live Effects In Fireworks, you can use all built-in filters in the Xtras menu as Live Effects using the Effect panel. This ensures that you can edit or remove the filter from an object at any time. You can also edit objects to which you applied the filters. Use the Xtras menu to apply filters only when you are certain that you will not need to remove or edit the filter. For more information on using the Xtras menu to apply Xtras filters, see Using filters and plug-ins . Note: If an Xtra filter is applied using the Xtras menu, the filter is editable only if Undo is available. After saving and reopening the image, the filter is not removable.
<url>html/10Effects2.html</url>
<title>Applying a Live Effect</title> Applying a Live Effect Use the Effect panel to apply Live Effects. When you apply an effect, it is listed in the Effect panel. You can apply multiple effects to an object. Each time you add an additional effect to the object, the effect is added to the bottom of the list in the Effect panel. A check box displays next to each effect in the list. That way, you can turn an effect on and off. Effect panel To apply a Live Effect to a selected object: 1 Choose an effect from the pop-up menu at the top of the Effect panel. The effect is added to the Effect panel. Depending upon the effect you choose, a pop-up edit window or a dialog box may appear to let you customize the effect settings. 2 If a pop-up edit window or dialog box opens, enter the settings for the effect, and then close it. Click OK to close a dialog box. Press Enter or click anywhere in the workspace to close a pop-up window. Note: The Effect panel is not available in image edit mode. 3 Repeat steps 1 and 2 to apply more than one Live Effect.
<url>html/10Effects3.html</url>
<title>Editing Live Effects</title> Editing Live Effects Use the Info button next to an effect in the Effect panel to edit the effect applied to an object. Info button To edit a Live Effect: 1 In the Effect panel, click the Info button next to the effect you want to edit. Either a pop-up edit window or a dialog box opens. Note: If an effect is not editable, the Info button is dimmed. For example, you cannot edit Auto Levels. The Drop Shadow pop-up edit window 2 Adjust the effect settings. 3 When you have finished, click outside the pop-up edit window or press Enter to close it.
<url>html/10Effects4.html</url>
<title>Reordering Live Effects</title> Reordering Live Effects You can reorder multiple effects applied to an object. Reordering effects changes the sequence in which the effects are applied to the object. This can alter the appearance of the object. In general, effects that change the interior of an object, such as the Inner Bevel effect, should be applied before effects that change the exterior of the object. For example, apply the Inner Bevel effect before you apply the Outer Bevel, Glow, or Shadow effect. To reorder effects applied to a selected object: In the Effect panel, select the effect from the list that you want to move and drag the effect to the desired position in the list. Effects listed at the top of the list are applied before the effects listed at the bottom of the list.
<url>html/10Effects5.html</url>
<title>Removing Live Effects</title> Removing Live Effects You can also remove effects from an object easily. If several effects are applied to an object, you can remove a single effect or remove all effects. For information on temporarily disabling an effect, see Handling Live Effect redraw . To remove a single effect applied to a selected object: 1 In the Effect panel, select the effect you want to remove from the list. 2 Click the Delete button at the bottom of the Effect panel, or drag the effect to the Delete button. To remove all effects from a selected object: In the Effect panel, choose None from the Effect pop-up menu.
<url>html/10Effects6.html</url>
<title>Creating custom effects</title> Creating custom effects Use the Effect panel Options pop-up menu to save a custom effect setting, rename an effect, and delete an effect. In Fireworks 3, saved effects are stored with the application. If you name and save the effect settings for an object, the effect is available to all subsequent documents you open. If you name and save multiple effects that are applied to an object, all of the effects can be applied to other objects at once. Note: When opening documents from previous versions of Fireworks that contain saved effects, the effects are titled Unnamed. However, all effect settings are retained. Use the Effect panel to rename the effect. To save an effect setting 1 Choose Save Effect As from the Effect panel Options pop-up menu. Options pop-up menu in the Effect panel 2 Type a name for the effect, and click OK. The effect is added to the pop-up menu in the Effect panel. To rename a custom effect setting: 1 Select the custom effect you want to rename from the Effect panel. 2 Choose Rename Effect from the Effect panel Options pop-up menu. 3 Enter a new name, and click OK. You cannot rename or delete a standard Fireworks effect. To delete a named custom effect: 1 Select the object that contains the custom effect you want to delete, or choose the custom effect from the pop-up menu at the top of the Effect panel. 2 Choose Delete Effect in the Effect panel Options pop-up menu.
<url>html/10Effects7.html</url>
<title>Saving an effect as a style</title> Saving an effect as a style Another way to save and reuse an effect is to create a style from the effect. Live Effects are one of the attributes that you can save as a style or as part of a style. For more information about styles, see Using styles .
<url>html/10Effects8.html</url>
<title>Using the default Live Effect settings</title> Using the default Live Effect settings Choose Use Defaults from the Effect pop-up menu in the Effect panel to load the default effects into the Effect panel. You can change the default effect settings. To save an effect setting as the default: 1 Select the object that contains the effect settings you want to use as the default. 2 Choose Save Defaults from the Effect panel Options pop-up menu.
<url>html/10Effects9.html</url>
<title>Handling Live Effect redraw</title> Handling Live Effect redraw It may take slightly longer to open a file in which numerous Live Effects are used. In addition, when you resize or edit an object with numerous effects, it may take Fireworks longer to redraw the object on the screen. You can temporarily disable an effect to speed the redraw on the screen. To temporarily disable an effect applied to an object: Deselect the check box next to the effect in the Effect panel. The effect is temporarily removed from the object. To reactivate a disabled effect: Click the check box next to the effect. To temporarily disable all effects applied to an object: Choose All Off in the Effect panel Options pop-up menu. Note: For information on permanently removing an effect applied to an object, see Removing Live Effects .
<url>html/11Masking1.html</url>
<title>Overview: Compositing and masking</title> Overview: Compositing and masking Compositing and masking techniques give you another level of creative control. You can create unique effects by blending the colors in overlapping objects. Fireworks has several blending modes to help you achieve just the look you want, from Darken to Saturation to Tint. Another way to create a unique effect is to create a mask group. With masking, you can use a path object or an image object to create a cut-out effect on an underlying image. For example, you can place an elliptical path object on top of a photograph. Then select the path and the picture and create a mask group. All areas outside the ellipse are effectively cropped, leaving only the part of the picture inside the ellipse. You can create all sorts of interesting effects by changing attributes of the objects in the mask group. The possibilities are endless.
<url>html/11Masking2.html</url>
<title>Compositing</title> Compositing Compositing is the process of using blending modes to vary the transparency or color interaction of two or more overlapping objects. Blending modes manipulate the color values of overlapping objects. They also add a dimension of control to the opacity effect. Understanding blending modes Choosing a blending mode applies it to the entire appearance of selected objects. Objects within a single document or a single layer can have blending modes that differ from other objects within the document or layer. When objects with different blending modes are grouped, the group's blending mode overrides individual blending modes. Ungrouping the objects restores each object's individual blending mode. A blending mode contains these elements: Blend color is the color to which the blending mode is applied. Opacity is the degree of transparency to which the blending mode is applied. Base color is the color of pixels underneath the blend color. Result color is the result of the blending mode's effect on the base color.
<url>html/11Masking3.html</url>
<title>Adjusting opacity and applying blending modes</title> Adjusting opacity and applying blending modes Use the Object inspector to adjust the opacity of selected objects and to apply blending modes. A setting of 100 renders an object completely opaque. A setting of 0 (zero) renders an object completely transparent. Set opacity and choose a blending mode in the Object inspector. To set a blending mode for existing objects: 1 With two objects overlapping, select the top object. 2 From the Blending Mode pop-up menu, choose a blending option as described in this section. To set a default blending mode to be applied to objects as you draw them: 1 Choose Edit > Deselect to avoid inadvertently applying a blending mode. 2 In the Object inspector, choose a blending mode as the default as described in this section. Normal applies no blending mode. Multiply multiplies the base color by the blend color, resulting in darker colors. Screen multiplies the inverse of the blend color by the base color, resulting in a bleaching effect. Darken selects the darker of the blend color and base color to use as the result color. This replaces only pixels that are lighter than the blend color. Lighten selects the lighter of the blend color and base color to use as the result color. This replaces only pixels that are darker than the blend color. Difference subtracts the blend color from the base color or the base color from the blend color. The color with less brightness is subtracted from the color with more brightness. Hue combines the hue value of the blend color with the luminance and saturation of the base color to create the result color. Saturation combines the saturation of the blend color with the luminance and hue of the base color to create the result color. Color combines the hue and saturation of the blend color with the luminance of the base color to create the result color, preserving the gray levels for coloring monochrome images and tinting color images. Luminosity combines the luminance of the blend color with the hue and saturation of the base color. Invert inverts the base color. Tint adds gray to the base color. Erase removes all base color pixels, including those in the background image.
<url>html/11Masking4.html</url>
<title>Blending mode examples</title> Blending mode examples Original image Normal Multiply Screen Darken Lighten Difference Hue Saturation Color Luminosity Invert Tint Erase
<url>html/11Masking5.html</url>
<title>Blending mode behavior</title> Blending mode behavior Blending modes behave differently depending on whether you are in object mode or image edit mode. In object mode, a blending mode affects the selected object. In image edit mode, a blending mode affects a floating selection of pixels. In image edit mode without a floating selection, a blending mode affects the brushes and fills of subsequently drawn objects.
<url>html/11Masking6.html</url>
<title>Masking images</title> Masking images Masks are created by grouping two objects together as a mask group. The top object (the mask) is used to create a cut-out effect on the bottom object. You can use either an image or an object with paths as the top mask object. A mask group has two primary uses: The path of a vector object outlines another object or image. This is known as a paste inside or clipping path in FreeHand. It shapes the underlying object or image to its path. An image object's pixels outline other objects so that the top object is not visible and the value of each pixel in the top object affects the visibility of the bottom object. This is known as a layer mask in Photoshop. A typical application of a mask is to use the top image to define gradient transparency for the bottom object. By editing the stroke and fill attributes of the mask object, you can create many unique effects. See Editing mask groups for information on editing a mask object. Image and clipping path Path mask Image mask
<url>html/11Masking7.html</url>
<title>Creating masks</title> Creating masks You can use a path object or an image object as a mask. To create a path mask: 1 Create an object that you want to use as the top mask object. 2 Position the object or image over an area to be masked. 3 Select the top mask object and the objects to be masked. 4 Complete the path mask: Choose Modify > Mask Group > Mask to Path. Select just the objects to be masked and choose Edit > Cut. Then select the top mask object, and choose Edit > Paste Inside. To center mask objects inside the top mask object: Click the mask group handle located in the center of the mask group and drag until the image is centered the way you want it. To create an image mask: 1 Create an object that you want to use as the top mask object. For example, create text with a gradient fill of black to white. Note: See Editing mask groups for information on creating unique edges and fills. 2 Position the object over the area of the image to be masked. 3 Select the top mask object and the objects to be masked. 4 Choose Modify > Mask Group > Mask to Image. The top object is used as an alpha object whose grayscale values mask the bottom objects. Note: The top object need not be a path for this type of masking. It can be an image.
<url>html/11Masking8.html</url>
<title>Editing mask groups</title> Editing mask groups Fireworks lets you modify a mask group anytime. You can modify the edges of the top mask object to create impressive effects. For example, you might apply a feather edge to the top mask object as shown in the following illustration. Original mask group After feathering the edge When the mask group is selected, the attributes of the top object are reflected in the Fill panel, the Stroke panel, and the Effect panel. To convert a selected path mask to an image mask: In the Object inspector, choose Image as the Mask option. Choose Modify > Mask Group > Mask to Image. To convert a selected image mask to a path mask: In the Object inspector, choose Path as the Mask option. Choose Modify > Mask Group > Mask to Path. To convert a selected normal group to a mask group: In the Object inspector, choose Mask Group from the Type pop-up menu. Choose Modify > Mask Group > Image to Mask. Choose Modify > Mask Group > Mask to Image. To convert a selected mask group to a normal group: In the Object inspector, choose Group from the Type pop-up menu. To subselect objects within a mask group: Use the Subselection tool. Double-click the mask group handle. Choose Edit > Subselect.
<url>html/12Optimizing1.html</url>
<title>Overview: Optimizing graphics</title> Overview: Optimizing graphics The ultimate goal in Web graphic design is to create great looking images that download as fast as possible. To do that, you must reduce the number of colors, select a format with the best compression for your image, and maintain as much quality as possible. This balancing act is known as optimization—finding the right mix of color, compression, and quality. In Fireworks, optimization settings apply only to exported images. Therefore, you can work freely through the creative process of design without worrying too much about limiting color usage or applying effects. Then, choose, customize, and compare optimization settings that are best for your image when you are ready to export. Optimizing images in Fireworks is a three-part task: Choose the best file format. Each file format has a different way of compressing color information in the file. Choosing the appropriate format for certain types of graphics can greatly reduce file size. Set format-specific options. Each Web file format has a unique set of options for controlling image compression. For example, you can use dithering on a GIF to compensate for fewer colors stored in the image, and you can use smoothing on a JPEG to blur the image slightly, which helps JPEG compression reduce the file size. Adjust the colors in the image. Limit colors by confining the image to a specific set of colors, called a color palette. Then, trim unused colors from the color palette. Fewer colors in the palette means fewer colors in the image, which results in smaller file size. Reducing the number of colors can also diminish image quality, so you must try various color palettes to find the best balance of quality and size.
<url>html/12Optimizing10.html</url>
<title>Choosing GIF</title> Choosing GIF Graphics Interchange Format, or GIF, is a popular Web graphic format. Although it can contain only 256 colors, GIF offers good, lossless image compression. Also, GIFs can contain a transparent area and multiple frames for animation. Images compressed with lossless compression normally lose no image quality when they are compressed. A GIF compresses by scanning horizontally across a row of pixels, finding solid areas of color, and then abbreviating identical areas of pixels in the file. Therefore, images with repetitive areas of solid color compress best when exported as GIFs. A GIF is usually ideal for cartoon-like graphics, logos, graphics with transparent areas, and animations. Note: Dithering or anti-aliasing GIF images produces larger files.
<url>html/12Optimizing11.html</url>
<title>Choosing JPEG</title> Choosing JPEG JPEG is an alternative to GIF developed by the Joint Photographic Experts Group specifically for photographic images. JPEG supports millions of colors (24-bit). JPEG is a lossy format, which means that some image data is discarded when it is compressed, reducing the quality of the final file. However, image data can often be discarded with little or no noticeable difference in quality. When exporting a JPEG, use the Quality pop-up menu slider in the Optimize panel to control how much quality is lost when compressing the file. A high percentage setting maintains image quality but compresses less, producing larger files. A low percentage setting yields a small file, but produces a lower-quality image. Use the 2-Up and 4-Up previews to test and compare the appearance and estimated file size with different Quality settings for an exported JPEG. The JPEG format is best for scanned photographs, images using textures, images with gradient color transitions, or any images that require more than 256 colors.
<url>html/12Optimizing12.html</url>
<title>Choosing PNG</title> Choosing PNG The Portable Network Graphic, or PNG, is the most versatile of the Web graphic formats. However, not all Web browsers can take full advantage of PNG characteristics without using plug-ins. A PNG can support up to 32-bit color, can contain transparency or an alpha channel, and can be progressive. PNG compression is lossless, even in high color depths. It compresses across rows and columns of pixels, often yielding better compression than GIF, which only scans rows. The PNG format is best for creating complex live transparency, high-color graphics, and better compressed low-color graphics. PNG is the native file format for Fireworks. However, Fireworks PNG files contain additional source information that is not saved when you export a PNG for use on the Web.
<url>html/12Optimizing13.html</url>
<title>Choosing optimization settings for GIFs and PNGs</title> Choosing optimization settings for GIFs and PNGs Fireworks optimization settings are similar for GIFs and 8-bit PNGs (PNG8).
<url>html/12Optimizing14.html</url>
<title>Choosing the color depth</title> Choosing the color depth Color depth is the number of colors in the exported graphic. GIF images are always exported in 8-bit color (256 colors) or less. You can export PNG at higher color depths. Higher color depths create larger exported files, and are typically not ideal for Web graphics. Use PNGs with 24- or 32-bit color depths when exporting photographic images with continuous tones or complex gradient blends of colors.
<url>html/12Optimizing15.html</url>
<title>Choosing a color palette</title> Choosing a color palette Exported GIFs and 8-bit PNGs each contain a color palette. A color palette is a list of up to 256 colors available to the file. Only colors defined in the color palette appear in the graphic; however, some color palettes contain colors that are not in the graphic. Adjusting the color palette during optimization affects the colors in the exported image. For more information on color palettes, see Optimizing color palettes .
<url>html/12Optimizing16.html</url>
<title>Dithering to approximate lost colors</title> Dithering to approximate lost colors Dithering approximates colors not in the current palette by alternating two available similar colors from pixel to pixel. Dithering is especially helpful when exporting images with complex blends or gradients or when exporting photographic images to an indexed image format such as GIF. Dithering can greatly increase file size. To dither an image to be exported: Enter a percentage value in the Dither text box of the Optimize panel.
<url>html/12Optimizing17.html</url>
<title>Setting loss to reduce file size</title> Setting loss to reduce file size To make GIF files compress even smaller than usual, enter a Loss setting in the Optimize panel. Higher loss settings yield smaller files but lower image quality. A loss setting between 5 and 15 typically yields the best results.
<url>html/12Optimizing18.html</url>
<title>Defining transparent areas</title> Defining transparent areas You can set transparent areas in both GIFs and PNGs so that in a Web browser, the background of the Web page is visible through the transparent areas of the image. For more information on setting transparency, see Assigning transparency .
<url>html/12Optimizing19.html</url>
<title>Removing all unused colors from the palette</title> Removing all unused colors from the palette Choose Remove Unused Colors in the Optimize panel Options pop-up menu to create the smallest file with the least number of colors. Deselect Remove Unused Colors to include all colors in the palette, including colors that are not present in the exported image.
<url>html/12Optimizing2.html</url>
<title>Optimizing in the workspace</title> Optimizing in the workspace Fireworks optimization controls are conveniently located on panels in the workspace: The Optimize panel contains the key controls for optimizing images in Fireworks. The Color Table panel displays the colors in the current color palette. The Preview window shows you a preview of how the exported graphic will look. Note: In Fireworks, all the optimization controls are in the workspace. However, you can still optimize the image with the Export Preview dialog box by choosing File > Export Preview. For more information on the Export Preview, see Optimizing and previewing during export . You can choose from common optimization settings to quickly set a file format and apply several format-specific settings. You can adjust preset settings. If you need more precise optimization control than the presets offer, you can create custom optimization settings using the Optimize panel. To choose a preset optimization: Choose it from the Optimize panel Settings pop-up menu. To specify optimization settings for an image: 1 In the Optimize panel, choose a file format. For more information, see Selecting the appropriate file format . 2 Set format-specific options. For more information, see Choosing optimization settings for GIFs and PNGs and Choosing optimization settings for JPEGs . 3 Choose other optimization settings from the Optimize panel's Options pop-up menu, if necessary.
<url>html/12Optimizing20.html</url>
<title>Interlacing: Downloading in segments</title> Interlacing: Downloading in segments When viewed in a Web browser, interlaced images quickly appear at a low resolution and then transition to full resolution as they continue to download. Choose Interlaced from the Optimize panel Options pop-up menu to make an exported GIF or PNG interlaced.
<url>html/12Optimizing21.html</url>
<title>Choosing optimization settings for JPEGs</title> Choosing optimization settings for JPEGs JPEGs are always saved in 24-bit color. JPEG compression specializes in compressing color transitions and gradients. Reducing quality to reduce file size Adjust the Quality setting in the Optimize panel to increase or decrease the quality of the JPEG image. Choosing a lower quality will make the resulting JPEG file smaller. Blurring edges to increase compression Set Smoothing in the Optimize panel to help decrease the file size of JPEGs. Smoothing blurs hard edges, which do not compress well in JPEGs. Higher numbers produce more blurring in the exported JPEG, typically creating smaller files. Sharpening color edges and fine detail Choose Sharpen JPEG Edges from the Optimize panel Options pop-up menu to help preserve fine edges between two colors. Use Sharpen JPEG Edges when exporting JPEGs with text or fine detail to preserve the sharpness of these areas. Choosing Sharpen JPEG Edges increases file size. Progressive JPEGs Choose Progressive JPEG from the Optimize panel Options pop-up menu to export a progressive JPEG. Progressive JPEGs, like interlaced GIFs, display at low resolution and then increase in quality as they continue to download. Some older image editing applications cannot open progressive JPEGs.
<url>html/12Optimizing22.html</url>
<title>Optimizing color palettes</title> Optimizing color palettes GIFs and PNGs exported in 8-bit color or less use a color palette to store and reference colors used in the exported image file. Optimize and customize color palettes using the Color Table panel.
<url>html/12Optimizing23.html</url>
<title>Choosing the appropriate color palette</title> Choosing the appropriate color palette Choose a palette from the Optimize panel Palette pop-up menu, and then optimize it. These palettes are available by default: Adaptive is a custom palette derived from the actual colors in the document. Adaptive palettes most often produce the highest quality image with the smallest possible file size. Web Adaptive is an adaptive palette in which colors that are close to Websafe colors are converted to the closest Websafe color. Web 216 is a palette of the 216 colors common to both Windows and Macintosh computers. This palette is often called a Websafe or browser-safe palette because it produces fairly consistent results in various Web browsers on either platform. Exact is a palette containing the exact colors used in the image. Only images containing 256 or fewer colors may use the Exact palette. If the image contains more than 256 colors, the palette switches to Adaptive. System (Windows) and System (Macintosh) each contain the 256 colors defined by the Windows or Macintosh platform standards, respectively. Grayscale is a palette of 256 or fewer shades of gray. Choosing this palette converts the exported image to grayscale. Black and White is a two-color palette consisting only of black and white. Uniform is a mathematical palette based on RGB pixel values. Custom is a palette that has been modified or loaded from an external palette or a GIF file. To import a palette: 1 Load an ACO or GIF palette: Choose Load Palette from the Color Table panel Options pop-up menu. Choose Custom from the Optimize panel Palette pop-up menu. 2 Navigate to an ACO or GIF file and click Open. The colors from the ACO or GIF file are added to the Color Table panel.
<url>html/12Optimizing24.html</url>
<title>Setting the number of colors in the palette</title> Setting the number of colors in the palette Enter a number in the Colors option of the Optimize panel to set the maximum number of colors allowed in the color palette of the exported image. The number on the bottom left of the Color Table panel indicates the actual number of colors visible in the image. Create smaller files by reducing the number of colors. Colors option Setting the number of colors to a number lower than the actual number of colors in an image discards some colors, beginning with the least used colors. Pixels containing discarded colors convert to the closest color remaining in the palette.
<url>html/12Optimizing25.html</url>
<title>Viewing colors in a palette</title> Viewing colors in a palette The Color Table panel displays colors in the current preview when working in 8-bit color or lower and lets you modify an image's palette. A variety of tiny symbols appear on some color swatches, indicating certain characteristics of individual colors as follows: This symbol Indicates Indicates the color has been edited, affecting only the exported document. This does not change the color in the document. Indicates the color is locked. Indicates the color is transparent. Indicates the color is Websafe. Indicates the color has multiple attributes. In this case, the color is Websafe, locked, and it has been edited. If you edit the document, the Color Table panel may no longer show all the colors in the document. In this case, the panel title changes to Colors (Rebuild), indicating that you must rebuild the color table. To update the colors in the Color Table panel to reflect edits in the document: Choose Rebuild Color Table from the Color Table panel Options pop-up menu. To select a color: Click the color in the Color Table panel. To select multiple colors: Hold down Control (Windows) or Command (Macintosh) as you click colors. To select a range of colors: 1 Click a color. 2 Hold Shift and click a second color. To preview all the pixels in the document that contain a specific color: 1 Click the Preview tab of the document window. 2 Click and hold on a color in the Color Table panel. The pixels that contain the selected color temporarily change to another highlight color until you release the mouse button. Note: When previewing pixels in the document using the 2-Up or 4-Up view, select a view other than the Original view.
<url>html/12Optimizing26.html</url>
<title>Locking colors in a palette</title> Locking colors in a palette You can lock individual colors so that you cannot remove or change them when changing palettes or reducing the number of colors in a palette. If you switch to another palette after colors have been locked, locked colors are added to the new palette. To lock a selected color: Click the Lock button at the bottom of the Color Table panel or choose Lock Color from the Options pop-up menu. To unlock a color: 1 Select a color in the Color Table panel. 2 Click the Lock button in the Color Table panel or deselect Lock Color from the Options pop-up menu. To unlock all colors: Choose Unlock All Colors from the Color Table panel Options pop-up menu.
<url>html/12Optimizing27.html</url>
<title>Editing colors in a palette</title> Editing colors in a palette You can change a color in the palette by editing it in the Color Table panel. Editing a color replaces all instances of that color in the image to be exported. Editing does not replace the color in the original image. To edit a color: 1 Select a color and open the system color picker: Select a color and click the Edit Color button at the bottom of the Color Table panel. Double-click a color in the Color Table panel. Select a color and choose Edit from the Options pop-up menu. 2 Change the color using the system color picker. The new color replaces every instance of the replaced color in the preview area. Note: Right-click (Windows) or Control-click (Macintosh) a color in the palette to display a shortcut menu of edit options for the color. To remove edits from colors: 1 Select an edited color in the Color Table panel. 2 Remove the edit: Click to deselect the button corresponding to the edit you want to remove. For example, to unlock a color, select a locked color and then click the Lock button at the bottom of the Color Table panel. Choose Remove Edit from the Color Table panel Options pop-up menu. The color reverts to its original, unedited color.
<url>html/12Optimizing28.html</url>
<title>Setting Websafe colors</title> Setting Websafe colors Websafe colors are colors that are common to both Macintosh and Windows platforms. These colors are not dithered when viewed in a Web browser on a computer display set to 256 colors. Fireworks has several methods of applying and using Websafe colors. To force all colors to Websafe colors: Choose the Web 216 palette. To create an adaptive palette that favors Websafe colors: Choose the Web Adaptive palette. Non-Websafe colors that are close to Websafe colors are converted to the closest Websafe color. To force a color to its closest Websafe equivalent: 1 Select a color in the Color Table panel. 2 Change the color: Click the Snap to Websafe button. Choose Snap to Websafe from the Color Table panel Options pop-up menu. Changing colors to Websafe in the Color Table panel does not effect the actual image, only the exported version of the image.
<url>html/12Optimizing29.html</url>
<title>Saving palettes</title> Saving palettes You can save custom palettes as external palette files. Use saved palettes with other Fireworks documents or in other applications that support external palette files, such as Adobe Photoshop and Macromedia FreeHand. To save a custom color palette: 1 Choose Save Palette from the Options pop-up menu. 2 Type a name for the palette and choose a destination folder. 3 Click Save. You can load the saved palette file into the Swatches panel or use it when exporting other documents.
<url>html/12Optimizing3.html</url>
<title>Specifying optimization settings for slices</title> Specifying optimization settings for slices You can specify unique optimization settings for each slice in a sliced document. For example, you might want to do this when one part of your graphic contains a photographic image best exported as a JPEG, while another part might be a solid area of white, which would be better compressed as a GIF. By drawing a slice over each part, you can set each part to export differently. When you select a slice object on the Web Layer, the Optimize panel displays the settings for that slice. To set optimization settings for a slice: 1 Select a slice object. If slice objects are not visible, click the Show Hotspots and Slices button in the Toolbox. These buttons hide and show the Web Layer. Show Hotspots and Slices button Hide Hotspots and Slices button 2 Enter optimization settings in the Optimize panel. The selected slice is now set to be exported with the specified optimization settings. For more information about slicing, see Drawing slice objects .
<url>html/12Optimizing4.html</url>
<title>Saving and reusing optimization settings</title> Saving and reusing optimization settings If you create custom optimization settings that you plan on reusing, save them for future use in optimization or batch processing. Saving custom presets stores: Settings in the Optimize panel. The color palette in the Color Table panel. Frame delay chosen in the Frames panel. To save optimization settings as a preset: 1 Click the Save button in the Optimize panel. 2 Type a name for the optimization preset and click OK. Saved optimization settings appear at the bottom of the Settings pop-up menu in the Optimize panel. They are available in all subsequent documents. The preset file is saved in the Fireworks 3\Settings\Export Settings folder. To share saved optimization settings with another Fireworks user: Copy the saved optimization preset file from the Fireworks 3\Settings\Export Settings folder to the same folder on another computer. To delete a custom preset optimization: 1 In the Optimize panel Settings pop-up menu, choose the optimization setting you want to delete. 2 Click the Delete button at the bottom of the Optimize panel. You cannot delete a preset optimization that ships with Fireworks.
<url>html/12Optimizing5.html</url>
<title>Previewing optimization settings and behaviors</title> Previewing optimization settings and behaviors The Preview window displays what your exported image would look like, based on the current optimization settings. Also, you can test behaviors and rollovers before export using the Preview window. To preview an image based on the current optimization settings: Click the Preview tab in the upper left corner of the document window. To show slice objects and guides in a Preview: Click the Show Hotspots and Slices button in the Toolbox. To hide slice objects and guides in a Preview: Click the Hide Hotspots and Slices button in the Toolbox.
<url>html/12Optimizing6.html</url>
<title>Previewing buttons and rollovers</title> Previewing buttons and rollovers Move the pointer over the rollover or button while viewing the Preview window to see how it will appear in a Web browser. Note: You must be viewing Frame 1 to preview buttons or rollovers. To change to Frame 1, click it in the Frames panel.
<url>html/12Optimizing7.html</url>
<title>Estimating file download time</title> Estimating file download time The Preview window displays the total file size and the estimated download time of the image. The estimated download time is the average amount of time it would take to download all the slices of the image and all of its rollover states using the current optimization settings if downloaded using a 28.8K modem.
<url>html/12Optimizing8.html</url>
<title>Comparing optimization settings</title> Comparing optimization settings If you want to compare the same graphic under different optimization settings, you can split the document window into two or four previews using the 2-Up and 4-Up tabs. You can assign unique settings to each preview to compare how each choice of settings affects the image. When you display the 2-Up or 4-Up preview, the first view is the original view. You can continue editing in that view and compare the original graphic with an optimized version. The bottom of each preview displays statistics of the current preview settings, including the file format, estimated download time, file size, palette, and number of colors. Preview window To compare two different optimization settings: 1 Click the 2-Up tab in the upper left of the document window. 2 Click one of the split-view previews to select it. 3 Enter settings in the Optimize panel and the Color Table panel. 4 Select the other preview and specify different optimization settings to compare with the first one. To compare four different optimization settings: 1 Click the 4-Up tab in the upper left of the document window. 2 Select one of the split-view previews. 3 Enter settings in the Optimize panel and the Color Table panel. 4 Select the other previews and then specify different optimization settings to compare against each other. When you choose 2-Up or 4-Up preview, the first view displays the original Fireworks PNG document, so you can compare it with optimized versions. You can switch this view to display another optimized version. To switch the original view with an optimized view in the 2-Up or 4-Up preview: 1 Select the original view. 2 In the Optimize panel, choose Resume Preview from the Settings pop-up menu. To switch any optimized view with an original view in the 2-Up or 4-Up preview: 1 Select an optimized view. 2 Choose Original (No Preview) from the Settings pop-up menu.
<url>html/12Optimizing9.html</url>
<title>Selecting the appropriate file format</title> Selecting the appropriate file format GIF, JPEG, and PNG are graphic file formats that are common in Web development because they are highly compressible. Compression ensures a faster transfer across the Internet. However, a graphic's appearance can vary from one format to another, depending upon each format's method of compression. Therefore, base your choice of file format upon the design and use of your graphic.
<url>html/13Export1.html</url>
<title>Overview: Exporting</title> Overview: Exporting After you create graphics in Fireworks, you can easily optimize them and export them in common Web formats, as well as vector application formats. Export and optimization settings do not change the original Fireworks document, so you can create a source version of the document, and then export the graphic in a variety of Web and print formats. Before you export for the Web, you must optimize the file to be exported. For more information on optimizing your image, see Optimizing in the workspace . If you want to optimize as part of the export process, the Export Preview dialog box offers all the optimization options found in the workspace. The Export Preview dialog box displays any changes you make so you can see how the changes affect image quality and file size. If you are new to optimizing and exporting Web graphics, use the Export Wizard. This wizard guides you through the export process and suggests settings. You can export graphics for other vector applications such as Macromedia FreeHand and Flash, and Adobe Illustrator. You can also copy and paste Fireworks paths into vector applications.
<url>html/13Export10.html</url>
<title>Using shims or nested tables when slicing</title> Using shims or nested tables when slicing When Fireworks exports HTML for a sliced image, the slices are reassembled in a table. You can export the table for sliced documents using shims or using nested tables: Shims are images that space table cells to align properly when viewed in a browser. A nested table is a table within a table. The nested table does not use shims. A nested table includes additional HTML code, which may load more slowly in a browser. You can specify unique table export settings for sliced objects for each document. If desired, you can use the Set Defaults button in the HTML Properties dialog box to apply defaults for all new documents. To define how Fireworks exports HTML tables: 1 Choose File > HTML Properties, or click the Setup button in the Export dialog box. 2 In the Table pop-up menu, choose a table export option: Nested Tables - No Shims creates a nested table with no shims. Single Table - No Shims creates a single table with no shims. This option can cause tables to display incorrectly in some browsers that cannot correctly display fixed table cell widths. 1-Pixel Transparent Shim uses a 1-pixel by 1-pixel transparent GIF as a shim that is resized as needed in the HTML. Shims from Image Slices applies additional slicing to the image, creating shims as needed from actual pieces of the image. 3 Click OK.
<url>html/13Export11.html</url>
<title>Exporting vector paths</title> Exporting vector paths Fireworks offers several new features to export vector paths for vector applications. For example, you can export vector paths to be opened in Macromedia FreeHand 8, Adobe Illustrator 7 or later, or Flash 3 or later. In addition, you can copy and paste a vector path into other vector programs. When you export to FreeHand or Illustrator, the objects appearance of objects may differ, depending on whether a Fireworks feature is supported by FreeHand or Illustrator. These features are not supported in FreeHand and Illustrator, and will not appear in the exported file: Live Effects Opacity and blending modes Texture, pattern, Web Dither fills, and linear gradient fills (FreeHand) Slice objects and image maps Many text formatting options Guides, grids, and canvas color Bitmap images (FreeHand) Also, object edges are set to hard, vertical text becomes horizontal, and right-to-left text is changed to left-to-right text.
<url>html/13Export12.html</url>
<title>Exporting to FreeHand and Illustrator</title> Exporting to FreeHand and Illustrator You can export paths from Fireworks to FreeHand or Illustrator to use in your print graphics, or to edit with more complex path-editing tools. To export a graphic for FreeHand or Illustrator: 1 Choose File > Export Special > Illustrator 7. 2 Click the Setup button. 3 Determine what happens to layers: Choose Export Current Frame Only to preserve layer names. Choose Convert Frames to Layers to collapse all Fireworks layers and export each frame as a layer. 4 Choose FreeHand 8 Compatible to export the file for use in FreeHand. Choosing FreeHand 8 Compatible omits images and converts gradient fills to solid fills. 5 Click OK and finish exporting.
<url>html/13Export13.html</url>
<title>Exporting to Macromedia Flash</title> Exporting to Macromedia Flash You can export Fireworks paths to Macromedia Flash for use in Flash graphics or animations on your Web site. Note: To export a Fireworks path that contains no bitmap characteristics, copy and paste the vector path into Flash using Edit > Copy as Paths. Some formatting is lost unless you choose Maintain Appearance in the Flash SWF Export Options dialog box. Stroke size and stroke color are maintained. Formatting lost during export includes: Live Effects Opacity and blending modes (Objects with opacity become symbols with an alpha channel.) Mask groups Slice objects, image maps, and behaviors (For example, rollovers are lost.) Some text formatting options, such as kerning and bitmap strokes Feather edges Layers Anti-aliasing on objects (The Flash player applies anti-aliasing at the document level. Therefore, anti-aliasing is applied to the document when you export.) When exporting to Flash, you can make several choices about how objects are exported. To export a graphic to Flash: 1 Choose File > Export Special > Flash SWF. 2 To choose how to export objects, click the Setup button. 3 To maintain the document's appearance, choose either or both options: Choose Objects: Maintain Appearance to convert path objects to image objects and preserve the appearance of applied strokes and fills. Choose Text: Convert to Paths to convert text to paths, preserving any custom kerning or spacing you entered in Fireworks. 4 Choose Objects: Maintain Paths and Text: Maintain Editability to maintain path editability. 5 Click OK and finish exporting.
<url>html/13Export14.html</url>
<title>Copying and pasting selected paths</title> Copying and pasting selected paths Use Copy as Paths to copy selected Fireworks paths to other applications such as FreeHand, Flash, Adobe Photoshop, Illustrator, or CorelDRAW. Copy as Paths copies only Fireworks paths. To copy selected Fireworks paths: 1 Choose Edit > Copy as Paths. 2 Switch to an open document in another application. 3 Paste the paths into the other application.
<url>html/13Export2.html</url>
<title>Exporting an image</title> Exporting an image If you optimized your graphics in the workspace using the Optimize panel and the Color Table panel, you can use File > Export to export your graphic. This bypasses the Export Preview dialog box and opens the Export dialog box. To export an image: 1 Choose File > Export. 2 Choose a location for exported files. The location is the folder where the exported images will be placed. Typically, the best location is a folder within your local site. 3 Name the file. For more information about naming multiple files, see Naming slices . 4 Choose slicing options. See Exporting sliced objects . 5 Choose an HTML style that corresponds to the HTML editor. 6 Choose a location for the HTML file: Same Directory exports the HTML to the same folder as the image files. One Level Up exports the HTML file to one folder above the image files. This is the most common location. Custom allows you to specify a location for the HTML. Copy to Clipboard exports the HTML information to the Clipboard rather than to a file, so that you can paste it directly into an HTML editor. Note: Fireworks automatically generates links between the HTML file and the images. 7 Click Save (Windows) or Export (Macintosh).
<url>html/13Export3.html</url>
<title>Results of exporting</title> Results of exporting When you export, Fireworks generates all the files you need to recreate your image on a Web page: It generates an HTML file that contains the necessary JavaScript and tables to reassemble a sliced image or to create rollover functionality. Fireworks-generated HTML always contains a link to the exported image and sets the Web page background color to the canvas or matte color of the graphic. For more information about using the HTML generated with Fireworks, see Fireworks HTML overview . It generates one or more image files, depending on how many slices you created in your document and how many states you included in buttons or rollovers in your document. It generates, if necessary, a file called Shim.gif, which is a transparent, 1-pixel by 1-pixel GIF that Fireworks uses in the HTML to fix spacing problems when the sliced images are reassembled in an HTML table. You may choose whether or not Fireworks exports a shim. See Using shims or nested tables when slicing .
<url>html/13Export4.html</url>
<title>Exporting with the Export Wizard</title> Exporting with the Export Wizard Use the Export Wizard to go step by step through the export process. Answer questions about the file destination and intended use, and the Export Wizard suggests file type and optimization settings. If you prefer to optimize to a maximum file size, the Export Wizard optimizes the exported file to fit within the size constraint you set in the Target export file size option. To export a graphic using the Export Wizard: 1 Choose File > Export Wizard. 2 Answer the questions on each panel, clicking Continue to go to the next panel. The Analysis Results screen appears with recommendations about file formats. Note: Choose Target Export File Size in the first panel to optimize to a maximum file size. 3 Click Exit to view the results. The 2-Up Preview window shows two recommended export options. 4 Click the preview area that contains the file format you want to use. 5 Change export settings, if needed. 6 Click Export. 7 In the Export dialog box, type a name for the file, choose slicing options and HTML style, choose the destination, and click Save (Windows) or Export (Macintosh).
<url>html/13Export5.html</url>
<title>Optimizing and previewing during export</title> Optimizing and previewing during export The Export Preview dialog box displays all of Fireworks optimization controls, as well as up to four previews of the exported image. The Options panel of the Export Preview dialog box contains all the optimization controls found in the Optimize panel and Color Table panel. Options in the Export Preview's Animation panel are also in the Frames panel. In addition to optimization controls, the Export Preview has unique uses. For example, the Export Preview appears when setting custom optimization settings during a batch process, or when launching Fireworks from within Dreamweaver to optimize or edit an image placed in Dreamweaver. For more information on optimizing images, see Optimizing in the workspace . To export a graphic using Export Preview: 1 Choose File > Export Preview to open the Export Preview. 2 Choose export and optimization settings. 3 Click Export. 4 In the Export dialog box, type a name for the file, choose slicing options and HTML style, choose the destination, and click Save (Windows) or Export (Macintosh).
<url>html/13Export6.html</url>
<title>Previewing optimization in the Export Preview</title> Previewing optimization in the Export Preview The preview area displays the graphic exactly as it will be exported and estimates file size and download time with the current export settings. You can use split views to compare various settings to find the smallest file size that maintains an acceptable level of quality. You can also constrain the file size from the Export Preview using the Optimize to Size Wizard. When exporting animated GIFs or JavaScript rollovers, the estimated file size is a total of all frames. Note: To increase redraw speed of the Export Preview, deselect Preview. To stop the redraw of the preview area when changing settings, press Esc. To preview optimization in the Export Preview dialog box: 1 To zoom in or zoom out in the preview, choose the Magnify tool. Click to magnify the preview. Alt-click (Windows) or Option-click (Macintosh) to zoom out. 2 To pan the preview area, choose the Pointer tool and drag in a preview, or hold down the Spacebar and drag in a preview. When multiple views are open, all previews are magnified to the same level and all previews pan simultaneously to display the same portion of the image. 3 To compare optimization settings in the Export Preview, click a split-view button to divide the preview area into two or four previews. Each preview window can display a preview of the graphic with different export settings. 4 To optimize a graphic based on a maximum file size, click the Export to Size button to open the Optimize to Size Wizard. Enter a file size. The Optimize to Size Wizard attempts to match the requested file size using these methods: Adjusting JPEG quality Modifying JPEG smoothing Altering the number of colors in 8-bit images Changing dither settings in 8-bit images Enabling or disabling optimization settings
<url>html/13Export7.html</url>
<title>Exporting frames or layers as multiple files</title> Exporting frames or layers as multiple files Fireworks can export all layers or all frames in a document as separate image files using a single export command. To export frames as individual files: 1 Choose File > Export Special > Layers/Frames to Files. 2 Choose Frames in the Files From pop-up menu. 3 Choose Trim Images to automatically crop the exported images to fit the objects on each frame. If you want to export frames the same size as the document, deselect Trim Images. 4 Enter the base name for each file in the Base Name text box. 5 Choose a destination and click Save (Windows) or Export (Macintosh). Each frame exports as a separate image using the optimization settings specified in the Optimize panel. To export layers as individual files: 1 Choose File > Export Special > Layers/Frames to Files. 2 Choose Layers in the Files From pop-up menu. 3 Choose Trim Images to automatically crop the exported images to fit the objects on each layer. If you want to export the layers the same size as the document, deselect Trim Images. 4 Choose a destination and click Save (Windows) or Export (Macintosh). Each layer exports as a separate image using the optimization settings specified in the Optimize panel. The name of the layer in the Layers panel determines the file name of each exported file.
<url>html/13Export8.html</url>
<title>Exporting an area</title> Exporting an area Use the Export Area tool to export a portion of a Fireworks graphic. To export a portion of a document: 1 Choose the Export Area tool from the Toolbox. 2 Drag a marquee defining the portion of the document to export. When you release the mouse button, the export area remains highlighted by a marquee. 3 Resize the export area: Hold down Shift and drag a handle to resize the export area marquee proportionally. Hold down Alt (Windows) or Option (Macintosh) and drag a handle to resize the marquee from the center. Hold down Alt+Shift (Windows) or Option+Shift (Macintosh) and drag a handle to constrain the proportions and resize from the center. Use the arrow keys to move the marquee. Hold down Shift while using the arrow keys to resize the marquee. 4 Open the Export Preview: Double-click inside the export area marquee. Click the Export button in the tool Options panel. The Export Preview displays the area defined by the export area marquee. 5 Adjust settings in the Export Preview and click Export. 6 In the Export dialog box, type a file name, choose a destination folder, and click Save (Windows) or Export (Macintosh). To cancel without exporting, double-click outside the export area marquee, press Esc, or choose another tool.
<url>html/13Export9.html</url>
<title>Exporting sliced objects</title> Exporting sliced objects Some Web designers create a graphic and then cut it into pieces. The pieces are then reassembled on a Web page using an HTML table. This is known as slicing. For more information on Slicing, see Drawing slice objects . To export sliced objects: 1 Select sliced objects. 2 Choose File > Export Special > Selected Slice. If you selected a single slice, the Export Preview dialog box opens. If you selected multiple slices, the Export dialog box opens. 3 Make any additional optimization settings in the Export Preview dialog box and click Export. 4 In the Export dialog box, choose a slicing method: None prevents slicing when exporting, even if you drew slice objects in the document. Use Slice Objects exports slices defined by slice objects. Slices: Current Frame exports slices defined by slice objects, but only images from the current frame. Slice Along Guides exports slices defined by existing guides. 5 In the Export dialog box, choose a destination and HTML settings, then click Save (Windows) or Export (Macintosh). Each slice is exported with unique optimization settings as defined for each slice in the Optimize panel.
<url>html/14Hotspots1.html</url>
<title>Overview: Creating hotspots and image maps</title> Overview: Creating hotspots and image maps Go to the home page of most any Web site, and chances are you will find an image map. An image map is a graphic or group of graphics that appears on a Web page and has special areas called hotspots. The Web page's HTML file defines each hotspot's size and location. When the pointer rolls over a hotspot, the pointer changes to a small hand. Clicking a hotspot typically opens a Web page by referencing the URL that is assigned to it in the HTML code. Making an image map in Fireworks follows these general steps: Building the image map in the Fireworks PNG document Exporting the graphic and HTML files Placing the image map HTML in the appropriate place in your Web site or within another HTML file
<url>html/14Hotspots10.html</url>
<title>Choosing a Target option</title> Choosing a Target option A target is an alternate Web page frame or Web browser window in which the linked document opens. You can specify a target for a selected hotspot or slice in the Object inspector Target text box: Type the name of the HTML frame in which to open the linked document. Choose a reserved target from the Target pop-up menu. These are the reserved target options: _blank loads the linked documents in a new, unnamed browser window. _parent loads the linked document in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then the linked document will load into the full browser window. _self loads the linked document in the same frame or window as the link. This target is implied, so you usually need not specify it. _top loads the linked document in the full browser window, thereby removing all frames.
<url>html/14Hotspots11.html</url>
<title>Editing hotspots</title> Editing hotspots Web objects have points and paths like graphic objects. Use the Pointer, Subselection, and Transform tools to edit a hotspot. Other editing tools, such as the Reshape tool, do not edit hotspots. To edit a selected hotspot using points: 1 Choose the Pointer tool or Subselection tool. 2 Drag points: A rectangle hotspot changes position and dimensions but remains rectangular. A circle hotspot changes position and diameter but remains circular. A polygon hotspot changes shape according to the location of the moved point. To convert a selected hotspot into a rectangle, circle, or polygon hotspot: 1 Choose Window > Object to open the Object inspector. 2 Choose Rectangle, Circle, or Polygon from the Shape pop-up menu. To transform a selected hotspot: 1 Choose a Transform tool. 2 Drag the transform handles. To skew a selected hotspot: 1 Choose Polygon from the Shape pop-up menu in the Object inspector to convert the hotspot to a polygon hotspot. 2 Choose the Skew tool and drag the transform handles.
<url>html/14Hotspots12.html</url>
<title>Setting image map options</title> Setting image map options Client-side image maps have emerged as the primary choice among Web designers as more people update to recent versions of the leading Web browsers. Client-side image maps store the hyperlink information in the HTML document; server-side image maps store this information in a separate map file on the server. When users click hotspots on client-side image maps, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps because the server does not need to interpret where the user clicked. Netscape Navigator 2.0 and later, NCSA Mosaic 2.1 and 3.0, and all versions of Microsoft Internet Explorer support client-side image maps. After creating all the hotspots, use the Document Properties dialog box to set options for the image map. To set options for a simple image map: 1 Choose File > Document Properties. Disregard the Slice Options section. 2 Specify whether the image map is client-side, server-side, or both. Browsers that support both types give priority to client-side image maps. 3 Choose a Background URL for parts of the image not defined by hotspot objects. 4 Enter an alternative image description, which appears when the image is disabled or unavailable. Note: To save all information on the HTML Properties dialog box as the default settings for new Fireworks documents, click Set Defaults.
<url>html/14Hotspots13.html</url>
<title>Exporting image maps</title> Exporting image maps After you build the image map in the Fireworks PNG document, you must export the image map before it actually functions as an image map in a Web browser. Exporting an image map generates a variety of files. Exporting a client-side image map generates the graphic file and the HTML file containing map information for hotspots and corresponding URL links. Exporting a server-side image map generates the graphic file, a separate map file, and an HTML file containing a link to the map file. Exporting a sliced image map typically generates many graphic files. For more information about slicing, see Drawing slice objects . To export an image map: 1 Optimize the graphic to prepare it for export. For more information on Optimizing graphics in the workspace, see Optimizing in the workspace . 2 Choose File > Export to open the dialog box. 3 Navigate to the folder in which to place the graphic file, and name the file. If you have already built a local file structure for your Web site, you can save the graphic in the appropriate folder for the site from here. Disregard the Slicing option for now. 4 Choose an HTML Style format. Choosing any option other than None instructs Fireworks to generate an HTML document upon export. For more information about HTML Styles, see Exporting an HTML file . 5 Click the Browse button and navigate to the folder in which to place the HTML files. If you chose Dreamweaver 3 Library.lbi in step 4, you must place the HTML file in a folder named Library and locate that folder at the root level of your Web site. 6 Click Save to export the image map. 7 For server-side image maps, open the exported HTML file, and enter the URL path to the map file where it is placed on the server. You can open the HTML file that Fireworks generates for the image map and copy and paste the image map code into another HTML file. Fireworks uses HTML notes to clearly label the beginning and end of code for image maps and other Web features created in Fireworks. The Update HTML feature delivers Fireworks-generated HTML to the right location within HTML files in your Web site. For information on placing image maps into Dreamweaver or another HTML editor, see Placing Fireworks files in Dreamweaver .
<url>html/14Hotspots2.html</url>
<title>Choosing an image map source graphic</title> Choosing an image map source graphic The source graphic is the foundation upon which you build the image map. The source graphic may be a picture with distinct areas, or a row of labeled buttons, or a simple list of topics. It may be a complex graphic with all of these elements and more. You can create the source graphic in Fireworks or import it. Either way, choose one with elements that people are likely to perceive as hotspots. To establish a source graphic for an image map: 1 Create or import a graphic. 2 Choose Modify > Canvas Size and enter dimensions for the image map. 3 Choose File > Save As to name the Fireworks source document. The Fireworks PNG file in which you are building the image map is not the image map itself. The exported graphic and HTML files combine to create an image map in a Web browser.
<url>html/14Hotspots3.html</url>
<title>Creating hotspots</title> Creating hotspots After you identify areas on your source graphic that would make good hotspots, you can create the hotspots and then assign URL links to them. You can draw hotspots or create a hotspot by tracing objects. To draw a rectangular or circular hotspot: 1 Open the source graphic. 2 Choose the Rectangle Hotspot tool or the Circle Hotspot. 3 Drag the Hotspot tool to draw a hotspot over an area of the source graphic. Hold down Alt (Windows) or Option (Macintosh) to draw rectangles or circles from a centerpoint.
<url>html/14Hotspots4.html</url>
<title>Creating odd-shaped hotspots</title> Creating odd-shaped hotspots A hotspot need not always be a rectangle or a circle. You can also create polygon hotspots. To create a hotspot using the Polygon Hotspot tool: 1 Choose the Polygon Hotspot tool. 2 Click the tool to plot points, as if you are drawing straight segments with the Pen tool. The fill defines the hotspot area, whether the path is open or closed. To create a hotspot by tracing one or more selected objects: 1 Choose Insert > Hotspot. If you selected more than one object, a dialog box asks you whether you want to create a single rectangular hotspot covering all objects or an individual hotspot in the shape of each object. 2 Click OK. The Web Layer displays the new hotspot or hotspots. Another way to create a polygon hotspot is to convert a circle hotspot into a polygon hotspot, and then drag the points. For more information about converting hotspots, see Editing hotspots .
<url>html/14Hotspots5.html</url>
<title>Viewing hotspots on the Web Layer</title> Viewing hotspots on the Web Layer All Fireworks PNG documents contain the Web Layer. All hotspot objects and slice objects reside on this layer. For more information about slices, see Drawing slice objects . On the Web Layer, hotspots objects are translucent blue and slice objects are translucent green by default. You can change the color of Web objects to organize them. To organize Web objects by color: 1 Select one or more slice or hotspot objects. 2 Choose Window > Object to open the Object inspector. 3 Choose a color from the color well pop-up menu. Whenever you create a hotspot or slice, the Web Layer appears. To show or hide the Web Layer: Click the Show Hotspots and Slices button in the Toolbox. Click the eye icon next to the Web Layer in the Layers panel.
<url>html/14Hotspots6.html</url>
<title>Assigning URLs to hotspots</title> Assigning URLs to hotspots A URL, or Universal Resource Locator, is an address of a specific page or file on the Internet. Use the Object inspector to assign URLs to each hotspot. To assign a URL to a hotspot: 1 Select a hotspot on the Web Layer. 2 Choose Window > Object to open the Object inspector. 3 Enter a URL in the Link text box. 4 Enter an alternative (alt) description, which is text that appears in a Web browser as the image downloads. 5 Enter an HTML frame name or choose a reserved target. A target is an alternate Web page frame or Web browser window in which the linked file opens. See Choosing a Target option . 6 Choose an alternative hotspot color from the Overlay Color pop-up menu to organize the Web Layer.
<url>html/14Hotspots7.html</url>
<title>Managing URLs with the URL panel</title> Managing URLs with the URL panel When you intend to enter the same URLs several times, you can create a URL library in the URL panel, and then store the URLs in the library. URL libraries are available for all Fireworks documents. You can assign URLs from various libraries to hotspots within a single graphic. You can manage URL libraries using commands in the URL panel Options pop-up menu: Add to and clear from a library the URLs that are already in a document. Add URLs to and delete URLs from libraries. Edit the name of a URL in a library. Import URLs from any HTML file or URL library. Export URLs among libraries. To create a new URL library: 1 Choose New URL Library from the URL panel Options pop-up menu. 2 Enter a library name and click OK. Fireworks stores the URLs in an HTML bookmark file in the Fireworks 3\Settings\URL Libraries folder. These file names appear in the Library pop-up menu in the URL panel. To add a URL to a URL library: 1 Choose a library from the Library pop-up menu. 2 Enter an absolute or relative URL in the Link text box. 3 Click the Add Current URL to Library button. To assign a URL in the URL library to a selected hotspot: 1 Choose a library from the Library pop-up menu. 2 Click a URL from the list in the URL panel.
<url>html/14Hotspots8.html</url>
<title>Entering absolute or relative URLs</title> Entering absolute or relative URLs When you enter a URL in the Object inspector or URL panel, you can enter an absolute URL or a relative URL: If you are linking to a Web page that is beyond your Web site, you must use an absolute URL. If you are linking to a Web page within your Web site, you can use an absolute URL or a relative URL. Absolute URLs are complete URLs that include the server protocol, which is usually http:// for Web pages. For example, http://www.macromedia.com/support/fireworks is the absolute URL for the Macromedia Fireworks Support Web page. Absolute URLs remain accurate regardless of the location of the source document, but they do not link correctly if the target document is moved. Relative URLs are relative to the folder containing the source document. These are examples showing the navigation syntax of relative URLs: file.htm links to a file located in the same folder as the source document. ../../file.htm links to a file located in the folder two steps above the folder containing the source document. Each ../ represents one step. htmldocs/file.htm links to a file located in a folder named htmldocs, which is below the folder containing the source document. Relative URLs are often the simplest URLs to use for links to files that will always be in the same folder as the current document.
<url>html/14Hotspots9.html</url>
<title>Specifying alternate text</title> Specifying alternate text Alternate text appears on the image placeholder while the image is downloading from the Web, or in place of a graphic if it fails to download. In some versions of Internet Explorer, the text also appears next to the pointer as a tooltip. To specify alternate text: In the Object inspector, type text in the Alt text box.
<url>html/15Slicing1.html</url>
<title>Overview: Slicing images</title> Overview: Slicing images Before Fireworks, manually slicing images was a labor-intensive process. Slicing images has these advantages: You can optimize each piece of a graphic separately, resulting in smaller, faster-loading files. You can export some parts of an image as GIF and other parts as JPEG, to best use the strengths of each export format. You can design pages to reuse some of the same graphics from page to page, changing only the slices that have unique content, which results in a faster Web site. Also, you can edit and replace a single slice graphic without having to upload all the slices of an image again. You can create rollovers with slices. This chapter introduces basic slicing concepts. Chapter 15, "Creating Buttons" and Chapter 16, "Creating Advanced Rollovers" describe techniques for creating a variety of interactive graphics using slices.
<url>html/15Slicing10.html</url>
<title>Auto-naming slices</title> Auto-naming slices If you do not want to enter custom names for each slice, you can let Fireworks assign a unique name to each slice file automatically, based on the default naming convention. This table illustrates the auto-naming options. In this example, the base name is "MyFile." Option Result Basename_Row#_Col# MyFile_r01_c01 MyFile_r01_c02 MyFile_r02_c01 BaseName_Numeric MyFile_01 MyFile_02 MyFile_03 BaseName_Alphabetical MyFile_a MyFile_b MyFile_c Row#_Col#_BaseName r01_c01_MyFile r01_c02_MyFile r02_c01_MyFile Numeric_BaseName 01_MyFile 02_MyFile 03_MyFile Alphabetical_BaseName a_MyFile b_MyFile c_MyFile Base Name is a name you enter when exporting. It becomes part of each exported slice file's name, according to the naming convention. Row (r##) and Col (c##) designate the rows and columns of the table that Web browsers use to reconstruct a sliced image. They also become part of each exported slice file's name, according to the naming convention. To automatically name slice files: 1 Select one or more slices. 2 In the Object inspector, choose Auto-Name Slices. 3 When you export your sliced image, enter a name in the Base Name text box in the Export dialog box. Do not add a file extension to the base name. Fireworks automatically adds file extensions to slice files upon export. You can change the naming convention in the HTML Properties dialog box. To change the default auto-naming convention: 1 Choose File > HTML Properties to open the HTML Properties dialog box. 2 Choose a naming convention from the Auto-Naming pop-up menu. 3 Click the OK button. Note: To save all information on the HTML Properties dialog box as the default settings for new Fireworks documents, click Set Defaults.
<url>html/15Slicing11.html</url>
<title>Custom-naming slice files</title> Custom-naming slice files You may want to use specific names for slices, so you can easily identify slice files in your Web site file structure. For example, if you have a button on a navigation bar that returns to the Home page, you could name the slice "home." To enter a custom name for a selected slice: 1 In the Object inspector, deselect Auto-Name Slices. 2 Enter a name in the Slice Name text box. If you do not enter a name, Fireworks reverts to auto-naming. Do not add a file extension to the base name. Fireworks automatically adds file extensions to slice files upon export. If a slice has more than one frame, Fireworks adds a number to each frame's file. For example, if you enter the custom slice file name "home" for a three-state rollover, then Fireworks names the Up state graphic "home.gif," the Over state graphic "home_f2.gif." and the Down state graphic "home_f3.gif.
<url>html/15Slicing12.html</url>
<title>Using nested tables and shims</title> Using nested tables and shims In the HTML Properties dialog box, you can choose the type of table Web browsers use to reconstruct sliced graphics. You can also determine how browsers reassemble tables using shims or nested tables when slicing. See Using shims or nested tables when slicing .
<url>html/15Slicing13.html</url>
<title>Mixing file formats within a sliced image</title> Mixing file formats within a sliced image Some Web graphics contain photographs, vector or bitmap art, animations, areas of solid color, and text within a single image. Slicing the image makes it possible to export some parts of an image as GIFs and other parts as JPEGs. For more information about choosing various file formats, color palettes, and other optimization settings for slices within a single image, see Specifying optimization settings for slices .
<url>html/15Slicing14.html</url>
<title>Creating a text slice</title> Creating a text slice A text slice designates an area of a sliced image where ordinary HTML text appears in the browser. A text slice does not export any pixel image data; it exports HTML text that appears in the table cell defined by the slice. Text slices are useful if you want to quickly update messages that appear on your Web site without having to create new graphics. To create a text slice: 1 Draw a slice object. 2 In the Object inspector, choose Text from the Type pop-up menu. 3 Type in the large text box at the bottom of the Object inspector. 4 To format text in a text slice: Use HTML text formatting tags in the text box of the Object inspector. Use HTML text formatting tags in the HTML file you plan to transfer to your Web site after exporting the image containing the text slice. The text in a text slice does not appear in your Fireworks PNG file, but it appears in a Web browser.
<url>html/15Slicing15.html</url>
<title>Creating a replacement slice</title> Creating a replacement slice You can update a single slice of an existing sliced image, without having to export and upload the entire sliced image. It is recommended that you use custom slice naming when you intend to replace a slice, so that you can easily locate the replacement slice. To update a single slice of an image: 1 Edit the area under the slice in the Fireworks PNG file. 2 Select the slice. 3 Choose File > Export Special > Selected Slice. 4 Update Optimization settings, if necessary. 5 Export the slice into the same folder as the original slice using the same base name. If you retain the original file name for the updated slice and upload the slice to the same place on your Web site where the original came from, the new slice will replace the original slice in the image.
<url>html/15Slicing16.html</url>
<title>Creating JavaScript rollovers with slices</title> Creating JavaScript rollovers with slices Many Web designers use Fireworks slices to create JavaScript rollovers and navigation bars. The techniques they used in Fireworks 1 and 2 are still possible in Fireworks 3. However, the new Button Editor offers several advantages for making JavaScript rollovers and navigation bars. For more information about the Button Editor, see Chapter 15, "Creating Buttons."
<url>html/15Slicing2.html</url>
<title>Comparing slices with hotspots</title> Comparing slices with hotspots Hotspots and slices can have a URL and behaviors attached to them, and they can specify an area that changes appearance when the pointer triggers a rollover. You can also change the color of either Web object as it appears on the Web Layer. Hotspots are merely areas of a single image that trigger a response to mouse movement. Slices can serve the same purpose, but they also cut up an image like a puzzle and then reassemble it in a browser.
<url>html/15Slicing3.html</url>
<title>Drawing slice objects</title> Drawing slice objects Slicing a graphic is as easy as drawing a rectangle. Fireworks has two tools for slicing graphics: The Slice tool and the Polygon Slice tool. The objects you draw are called slice objects. The red lines protruding from the slice objects are slice guides, which determine where Fireworks will split the image into separate files on export . To draw a rectangular slice object: 1 Choose the Slice tool. 2 Drag to draw the slice object. The slice object and slice guides display on the Web Layer. You also can insert a slice based on a selected object. To insert a rectangular slice based on an object: 1 Select an object. 2 Choose Insert > Slice. The slice is a rectangle whose area includes the outermost pixels of the selected object. 3 If you have selected more than one object, choose an option in the dialog box: Single creates a single slice object that covers all selected objects. Multiple creates a slice object for each selected object. Note: You can drag and drop slice objects into other Fireworks documents.
<url>html/15Slicing4.html</url>
<title>Drawing polygon slices</title> Drawing polygon slices The Polygon Slice tool helps you avoid overlapping slices when you are creating a rollover using graphics that interlock or otherwise intrude on each other's area on the image. If you assign a behavior to a polygon slice, the polygon slice object defines the slice's active area. Be careful not to overuse polygon slices, as they require more JavaScript code than similar rectangular slices. A high number of polygon slices could adversely affect Web browser processing time. To draw a polygon slice object: 1 Choose the Polygon Slice tool. 2 Click to place the corner points of the polygon. The Polygon Slice tool draws only straight line segments. 3 Use these techniques when drawing polygon slices: Do not overlap polygon slice objects. When drawing a polygon slice object around objects with soft edges, be sure to include the entire object to avoid creating unwanted hard edges in the slice graphic. 4 Optionally, click the first point to close the polygon. To base a polygon slice on a selected object: 1 Choose Insert > Hotspot. 2 Choose Insert > Slice. The hotspot converts to a polygon slice. For more information about using the Polygon Slice tool to create complex rollovers, see Using irregularly shaped or overlapping rollovers .
<url>html/15Slicing5.html</url>
<title>Displaying slices and guides</title> Displaying slices and guides Slice guides appear automatically when you draw a slice object. The slice guides determine where Fireworks will chop the image into smaller files when exported as slices. You cannot edit slice guides like normal guides, but they redraw when you add, move, or edit slice objects. You can organize slices by assigning a unique color to each slice object. You can also change the color of slice guides. To hide or show all hotspots, slices, and guides: Click the Hide Hotspots and Slices or Show Hotspots and Slices button in the Toolbox. Click the eye icon next to the Web Layer in the Layers panel. To hide or show slice guides in any document view: Choose View > Slice Guides. To change the color of slice guides: 1 Choose View > Guide Options > Edit Guides. 2 Choose a new color from the Slice Color pop-up menu. To change the color of a selected slice object In the Object inspector, choose a new color from the Slice color well pop-up menu.
<url>html/15Slicing6.html</url>
<title>Using the slice overlay</title> Using the slice overlay In the Preview, 2-Up, and 4-Up views, the slice overlay differentiates the area currently being optimized from the rest of the document. The slice overlay, which is turned on by default, displays areas that are not being optimized with a dimmed, transparent white tint. The slice overlay is not shown in the Original view. When preparing to optimize a selected slice, the portions not being optimized are dimmed. When no slices are selected, sliced areas are dimmed and the rest of the document is optimized. You can select areas to optimize in the Preview, 2-Up, or 4-Up window. To select an area to optimize: 1 Click the Preview, 2-Up, or 4-Up tab. 2 Click the area to optimize. When a slice is selected, its overlay is turned off. You can select multiple slices by holding down Shift and clicking with the Pointer tool. To hide or show the slice overlay: Choose View > Slice Overlay. Hiding the Slice Overlay is useful in 2-Up and 4-Up previews when you want to compare an original view, with slices visible, with an optimized preview, with slices hidden.
<url>html/15Slicing7.html</url>
<title>Creating a simple sliced image</title> Creating a simple sliced image You can create a simple sliced image that downloads in pieces in a browser, which may be faster than downloading the original image as a single image. If you have sliced an image, but you do not intend to assign a URL to it or create a rollover from it, you can bypass most of the options in the Object inspector. To set object properties for a simple sliced image: 1 Open the Object inspector. 2 Choose Image from the Type pop-up menu. 3 Choose No URL (no HREF) from the Link pop-up menu. 4 Ignore the Alt and Target options. 5 Choose a naming convention. See Naming slices . 6 Choose export settings in the Optimize panel and Color Table panel. See Optimizing in the workspace .
<url>html/15Slicing8.html</url>
<title>Adding interactivity to slices</title> Adding interactivity to slices From the Object inspector, you can add the same interactive features to a slice object as you can add to a hotspot: a URL link, alternate text, and a target URL. You can assign a URL link to a slice so that clicking the slice area in a browser navigates to the page with that URL. To assign a URL link to a selected slice object: In the Object inspector, enter an absolute URL or relative URL: Type a URL in the Link text box. Choose a URL from the Link pop-up menu. Choose a URL from a URL library in the URL panel. For more information, see Assigning URLs to hotspots .
<url>html/15Slicing9.html</url>
<title>Naming slices</title> Naming slices Slicing cuts an image into pieces. Each piece exports as a separate file, so each file must have a name. Further, if an image has more than one frame, each piece in each frame is a separate file requiring a unique name. Fireworks names each slice file upon export. You can accept the default naming convention, change the convention, or enter custom names for each slice: Choose Auto-Name Slices to name the files using any of several general naming conventions. Deselect Auto-Name Slices and enter a name for each slice in the Slice Name text box.
<url>html/16Buttons1.html</url>
<title>Overview: Creating buttons</title> Overview: Creating buttons In Fireworks, you can create a variety of JavaScript buttons and rollovers, even if you know nothing about JavaScript. The Fireworks Button Editor leads you through the button creation process, automating many button-making tasks. The result is a convenient button symbol that you can position and transform as a single object. You can quickly replicate a button to create a navigation bar, easily update text across the button's frames, and convert Fireworks 2 rollovers to Fireworks 3 buttons. When you export a button, Fireworks automatically generates the JavaScript necessary to display the rollovers in a Web browser. In Macromedia Dreamweaver you can easily insert JavaScript-rollover HTML code from Fireworks into your Web pages. Also, you can cut and paste the rollover code into any HTML file.
<url>html/16Buttons10.html</url>
<title>Adding an Over While Down state</title> Adding an Over While Down state The Over While Down state appears when a button is displaying the Down state and the mouse moves over it. The Over While Down state is typically used for navigation bars, also known as nav bars. To add an Over While Down state to a button: 1 Click the Over While Down tab in the Button Editor. 2 Choose Include Nav Bar Over While Down State. 3 Place a graphic in the Button Editor: Click Copy Down Graphic to paste the Over While Down state graphic into the Over While Down window, and then edit it. Create a unique Over While Down state graphic. Import a graphic into the Over While Down window.
<url>html/16Buttons11.html</url>
<title>Editing button text</title> Editing button text In Fireworks, it is easy to change the text on a rollover button without editing each frame of the rollover. To change text on all states of a button simultaneously: 1 Select the button in the document. 2 In the Object inspector, type the new text in the Button Text text box and press Enter. The text updates on all states of the button. To change text on all states of a button simultaneously in the Button Editor: 1 Change text in the top text block on any state of the button. A message appears asking if you want to update the text in the other button states. 2 Click Yes.
<url>html/16Buttons12.html</url>
<title>Using bevel effects to draw button states</title> Using bevel effects to draw button states You can use any object to create a rollover state. However, because buttons are a common type of JavaScript rollover, Fireworks includes Live Effect presets to simplify the creation of common button appearances. Apply an Inner Bevel or Outer Bevel effect to an object, and then choose Raised, Highlighted, Inset, or Inverted from the Button Presets pop-up in the Effect pan Button Presets effect Description Raised The bevel appears raised up from the underlying objects. Highlighted The button's colors lighten. Inset The bevel appears sunken into the underlying objects. Inverted The bevel appears sunken into the underlying objects and the colors lighten. el. For example, if you are creating a four-state button, you could apply Raised to the Up state graphic, Highlighted to the Down state graphic, and so on. For more information about Live Effects, see Applying a Live Effect .
<url>html/16Buttons13.html</url>
<title>Creating a navigation bar using nested symbols</title> Creating a navigation bar using nested symbols A navigation bar is a group of buttons. Typically, a navigation bar remains, or seems to remain, on a Web page as other parts of the page change. An easy way to create a quick navigation bar is to duplicate a group of buttons, but change the text and the URL link on each button. To create a simple navigation bar: 1 Create a button with only the graphic elements and no text. 2 Create a new, empty button. 3 Drag the original button from the Library into the new empty button. You now have a button instance on a shared layer within the new button. 4 In the Layers panel, select a layer that is not a shared layer, and add text to the new button in each button state. 5 In the Down and Over While Down tabs, select the Include options, as appropriate. 6 Close the Button Editor. 7 In the document, duplicate the button with text. 8 For each duplicate button, change the text using the Object inspector. To update the graphics of all the buttons in a simple navigation bar: Use the Button Editor to edit the original button (the button without text). Fireworks updates the other buttons to reflect the new appearance. Because the text is unique to the newer button symbols, it will not be affected when the graphic is updated. You can also create a more complex navigation bar, using the Down and Over While Down states.
<url>html/16Buttons14.html</url>
<title>Converting Fireworks rollovers into buttons</title> Converting Fireworks rollovers into buttons You can convert rollovers created in Fireworks, including previous versions, into buttons to take advantage of the new button conveniences. To convert a Fireworks rollover into a button: 1 In the Frames panel, choose Onion Skinning. This lets you easily select all rollover state graphics. 2 Select all components of the rollover. 3 Choose Insert > Convert to Symbol. 4 Enter a name, choose Type: Button, and click OK. The components of the rollover convert to a button on its own shared layer, and the new button is placed in the Library. The rollover's hotspot objects and slice objects are not added to the new button.
<url>html/16Buttons15.html</url>
<title>Inserting a button from an external source</title> Inserting a button from an external source You can choose a button from a Fireworks library or from another Fireworks document. When you import a button from an external source, Fireworks remembers the source. Then, if the source file changes, you can update the imported button to reflect the changed original. To insert a ready-made button into the document: 1 Choose a library: Choose Insert > Libraries > Other and choose the button library or Fireworks document from which you want to insert a button. Choose Open to navigate to a button library outside of the Fireworks 3 \ Settings \ Libraries folder. 2 Choose a symbol from the library and click Import. To update an imported button: 1 In the Library panel, select the button symbol to update. 2 Choose Update from the Library panel Options pop-up. Fireworks updates the imported button to match the appearance of the original button.
<url>html/16Buttons2.html</url>
<title>What is a button?</title> What is a button? A button in Fireworks is an encapsulated rollover that contains all the possible appearances of the button, which represent its various states of use. You can use the Button Editor to assemble all of these elements—including the slice object, which is the active area for triggering the button—and then place the button in the Fireworks document. Each button can have up to four unique appearances, or states. Each state represents a button's appearance in response to a pointer action. The Up state is the default or "at rest" appearance of the button, when the pointer is away from the button. The Over state is the way the button appears when the pointer is moved over it in a Web browser. The Down state is the appearance of the button after it has been clicked, usually as it appears on the destination Web page. The Over While Down state is the appearance of the button when the pointer is moved over it while the button is in the Down state. Many buttons on the Web have only two states—Up and Over. The Over state is the most useful state because it typically alerts users that clicking the mouse is likely to do something. The Up and Down states communicate a dormant state, while the Over While Down state typically alerts users that clicking is likely to do nothing at all.
<url>html/16Buttons3.html</url>
<title>Understanding buttons</title> Understanding buttons A button created in the Button Editor is more than a regular JavaScript rollover created in Fireworks: A button is a special type of symbol. You can drag instances of it from the Library into your document. For more information about symbols, see Symbols and instances . A button is encapsulated. Moving the button in the document moves all of the components and states associated with that button—no more messy multi-frame editing. A button is easy to edit. Double-click it, and then change it in the Button Editor. A selected button has a convenient text box in the Object inspector where you can update text on all states simultaneously. Like any Symbol, buttons made in the Button Editor have a registration point.
<url>html/16Buttons4.html</url>
<title>Creating buttons</title> Creating buttons The easiest way to create a JavaScript rollover button or navigation bar is to use the Button Editor. The tips on each panel in the Button Editor help you make design decisions.
<url>html/16Buttons5.html</url>
<title>Creating a simple rollover button</title> Creating a simple rollover button You can create a simple two-state button in the Button Editor. To create a two-state button: 1 Choose Insert > New Symbol to open the Symbol Properties dialog box. 2 Choose the Button symbol type, name the button, and click OK. The Button Editor opens to the Up state tab. 3 In the work area of the Button Editor, place a graphic that will appear as the button's Up state: Use the drawing and editing tools to create a graphic. Import or drag and drop a graphic into the Button Editor. Import a button from a Fireworks button library. For information, see Inserting a button from an external source . 4 Choose Onion Skinning so you can visually align each button state graphic. 5 Click the Over tab. 6 Place an Over state graphic that will appear as the button's Over state: Click Copy Up Graphic to paste a copy of the Up state graphic into the Over window, and then edit it to change its appearance. Create a unique Over state graphic. Import a graphic into the Over window. 7 Skip the Down and Over While Down tabs. They are not used when creating a simple rollover button. 8 Click the Active Area tab. The Button Editor automatically creates a slice the size of the button symbol's bounding box. The slice updates when you edit a graphic in any state. 9 Click the Link Wizard to attach a URL to the rollover. For more information on the Link Wizard, see Attaching a URL to the button . When you close the Button Editor, the button appears in the Library and an instance of the button appears in the document. When you move or resize the button as a unit, all the states and the active area are moved or resized. To place additional copies of a button in the document: Drag the button from the Library to the document, creating an instance of that button.
<url>html/16Buttons6.html</url>
<title>Editing a button</title> Editing a button You can edit a button symbol after you have created it. When you edit a button symbol, all instances reflect the edits. If the button has been imported from a library or another Fireworks document, editing the button in the current document will break the link to the previous document. For more information on importing and updating buttons, see Inserting a button from an external source . To open a button in the Button Editor: Double-click any instance. Select a button and choose Modify > Symbol > Edit Symbol. To edit an existing button symbol: 1 Open the Button Editor. 2 Click the tab for any state. 3 Select the object and edit it as you would any object in the document.
<url>html/16Buttons7.html</url>
<title>Drawing and editing in the active area</title> Drawing and editing in the active area The active area of a button, also known as the hit area, is where the rollover is triggered when the pointer is moved over it in a Web browser. With Set Active Area Automatically selected, the Fireworks automatically creates a slice the size of the bounding box of the button symbol. If you need the active area to be a different size or shape, you can create a slice or hotspot. Web objects in a button's Active Area tab appear on the Web Layer of the document. To draw a slice or hotspot Web object: 1 Open the Button Editor. 2 Click the Active Area tab of the Button Editor. 3 Deselect Set Active Area Automatically. 4 Select a Slice or Hotspot tool and draw in the Button Editor. To edit a button's active area: 1 Open the Button Editor. 2 Click the Active Area tab. 3 Use the Pointer tool, Slice tool, or Polygon Slice tool to move, reshape, or redraw the current active area.
<url>html/16Buttons8.html</url>
<title>Attaching a URL to the button</title> Attaching a URL to the button Attach a URL to a button to link it to another Web page or Web site. To attach a URL to a button using the Link Wizard: 1 Select a button in the document. 2 In the Object inspector, click the Link Wizard button. The Link Wizard opens to lead you through steps for adding a URL to the button.
<url>html/16Buttons9.html</url>
<title>Adding a Down state</title> Adding a Down state The Down state appears when a button has been clicked and the button remains displayed on the Web page. The Down state is typically used for navigation bars, also known as nav bars. To add a Down state to a button: 1 Click the Down tab in the Button Editor. 2 Choose Nav Bar Down state. 3 Place a graphic in the Button Editor: Click Copy Over Graphic to paste a copy of the Over state graphic into the Down window, and then edit it. Create a unique Down state graphic. Import a graphic into the Down window.
<url>html/17Rollovers1.html</url>
<title>Overview: Creating advanced rollovers</title> Overview: Creating advanced rollovers You may need more complex rollover behavior than you can create in the Button Editor. For example, you may want to create a disjoint rollover, or a navigation bar that changes appearance according to which button is clicked. You can create complex rollovers using slices and frames without using the Button Editor. You can also assign additional behaviors to existing button symbols using the techniques discussed in this chapter. The basic building blocks for creating rollovers in Fireworks are slice objects, hotspot objects, and the Behaviors inspector. For more information about hotspots and slices, see Chapter 13, "Creating Hotspots and Image Maps" and Chapter 14, Slicing Images.
<url>html/17Rollovers10.html</url>
<title>Setting up the Swap Image behavior</title> Setting up the Swap Image behavior The second part of creating a disjoint rollover is attaching a behavior to the trigger area. To set up a Swap Image behavior for a disjoint rollover: 1 Select the Web object you want to use as the trigger. 2 Choose Swap Image from the Add Action (+) pop-up menu in the Behaviors inspector. The Swap image dialog box appears. 3 Choose a slice object for the swap area: Click the name of a slice object from the list at the top of the Swap Image dialog box. This list displays all of the slice objects in the document by their currently assigned name. Click a slice in the slice diagram. The slice diagram displays how the document is sliced. 4 Choose the source for the swap: Click Frame No. and choose a frame number to swap in when the rollover is triggered. Only the area immediately below the target slice object on the specified frame is used. Click Image File and enter or browse to the name of an external file to swap in when the rollover is triggered. 5 Choose Restore Image onMouseOut to swap the original image back into the slice when the pointer is moved away from the trigger area. 6 Choose Preload Images. For more information, see Preloading rollover states . 7 Click OK.
<url>html/17Rollovers11.html</url>
<title>Setting the mouse event that triggers the behavior</title> Setting the mouse event that triggers the behavior The final step is to set the pointer action that will trigger the Swap Image behavior. To set the pointer action that triggers a disjoint rollover: 1 Select the Web object that triggers the rollover. 2 In the Behaviors inspector, choose the Swap Image behavior from the Actions list. 3 Choose an event for the Swap Image behavior from the Events pop-up menu: onMouseOver triggers the event when the pointer moves over the event area. onMouseOut triggers the event when the pointer moves out of the event area. onClick triggers the event when you click the event area.
<url>html/17Rollovers12.html</url>
<title>Using external files as rollover source</title> Using external files as rollover source You can use GIFs, animated GIFs, JPEGs, and PNGs as the source for a rollover. When an external file is chosen as the rollover source, that file is swapped with the target slice when the rollover is triggered in a Web browser. The file must have the same width and height as the slice it is swapping into. If it is not the same size as the slice, the browser resizes the file to fit within the slice object. Resizing the file may reduce its quality, especially for an animated GIF. Note: Fireworks does not pre-cache rollovers that use external files for rollover states. Not pre-caching prevents interrupted display in browsers when using animated GIFs as rollover states. If you want to pre-cache these rollovers, you must customize the Fireworks output HTML. To select an external source file as the source of a rollover: 1 Choose Image File in the Swap Image, Nav Bar Over, or Nav Bar Down dialog box. 2 Navigate to the file you want to use.
<url>html/17Rollovers13.html</url>
<title>Using irregularly shaped or overlapping rollovers</title> Using irregularly shaped or overlapping rollovers Fireworks simplifies the task of creating irregularly shaped rollovers with overlapping areas. A slice object may be drawn in any shape using the Polygon Hotspot tool. When those slices are exported, Fireworks automatically creates the slices and JavaScript needed for the irregular target area or overlapping rollover to function correctly. Polygon slice tool For example, in the following illustration, two objects have overlapping areas. Fireworks lets you use each object as a rollover without writing additional JavaScript code to swap out the appropriate slices. To create irregularly shaped rollovers: 1 Draw polygonal slices that match the shape of each object with the Polygon Slice tool. Fireworks creates a number of slices, automatically defining multiple rectangular slice areas for the irregular slice objects. 2 Assign Swap Image behaviors to each slice to set up the rollover. 3 Export the file. Fireworks exports a number of slices and states to recreate the appearance of the irregularly shaped rollover. The JavaScript that Fireworks creates triggers several rollovers to swap out each slice that contains a portion of the irregular shape.
<url>html/17Rollovers14.html</url>
<title>Exporting rollovers</title> Exporting rollovers When you export rollovers from Fireworks, you export a number of images for the various rollover states as well as an HTML file containing JavaScript code. For more information on exporting, see Chapter 12, "Exporting." JavaScript and browser compatibility The JavaScript code exported with a rollover is used to display the rollover in a Web browser. The JavaScript exported from Fireworks includes browser detection, and is compatible with versions 3 or higher of both Netscape Navigator and Microsoft Internet Explorer. Some browsers, such as Internet Explorer 3, cannot display all four JavaScript rollover states. In that case, the JavaScript exported by Fireworks allows those browsers to display the Up state and link to the appropriate URL. Preloading rollover states The JavaScript generated by Fireworks performs preloading of rollover states, sometimes called "pre-caching." This means that when the HTML file is first loaded into the Web browser, all rollover images, even those not initially visible, are loaded into the browser's memory. When the pointer is moved over a Fireworks JavaScript rollover, the alternative state is immediately swapped, instead of waiting for it to be downloaded from the server. Pre-caching does not occur when the rollover is an external file to prevent animated GIFs from being interrupted when they are used as rollover states. Customizing HTML and JavaScript exported by Fireworks The style of HTML and JavaScript created by Fireworks is determined by HTML template file that you can edit. For more information on customizing Fireworks HTML, see Editing Fireworks HTML output styles .
<url>html/17Rollovers2.html</url>
<title>Understanding rollovers</title> Understanding rollovers JavaScript rollovers are graphics that change appearance in a Web browser when you move the pointer over them or click them. They take many forms, from buttons to swapped images to images that toggle. Whether you build JavaScript rollovers by using the Fireworks Button Editor, by using slices, or by writing JavaScript code yourself, rollovers all work the same way. Rollovers replace one graphic with another graphic in response to a pointer passing over it or clicking it. The following steps outline the general technique to help you understand how to create a rollover. To create regular rollover buttons, use the Button Editor. For more information, see Creating buttons . Generally, to build a rollover in Fireworks: 1 Create frames for the rollover. Each graphic for a rollover state is drawn on a separate frame. For example, a button has two to four frames. 2 Create or import a graphic on each frame. 3 Create slices to define the area that changes appearance when the rollover is triggered. All the states of a button share the same slice. 4 If the area that triggers the rollover is not the same area that changes appearance, draw a hotspot object to act as the trigger for the rollover. 5 Define the behaviors for the rollover. Behaviors determine what happens in response to the mouse event. For example, a behavior might instruct the Web browser to replace the image on Frame 5 with an image on Frame 6 when the mouse passes over a swap-image rollover. 6 Establish links, designate targets, and set up the naming convention for the graphic slices. For more information about establishing links, see Chapter 13, "Creating Hotspots and Image Maps." 7 Optimize the graphics. For more about Optimization, see Chapter 11, "Optimizing Graphics." 8 Export the slices to create the graphic files and generate the HTML, which includes the JavaScript code that controls the rollovers in a browser. For more about exporting slices, see Chapter 12, "Exporting." 9 Place the rollover HTML in your Web page's HTML.
<url>html/17Rollovers3.html</url>
<title>Matching rollover states with frames</title> Matching rollover states with frames Each appearance of a rollover is called a state. In Fireworks, place each state on a separate frame. For buttons, which have two to four frames, these are the states: The Up state displays the graphic on Frame 1. This is the button's default appearance. The Over state displays the graphic on Frame 2. This is the way the button appears when the pointer is moved over it in a Web browser. The Down state displays the graphic on Frame 3, as the rollover might appear after it is clicked. The Over While Down state displays the graphic on Frame 4 when the pointer moves over a button in its Down state. While these states also generally apply to other types of rollovers, non-button rollovers may use frames beyond Frame 4.
<url>html/17Rollovers4.html</url>
<title>Defining the area that activates the rollover</title> Defining the area that activates the rollover Use slice objects or hotspot objects to define the area that triggers the rollover when the pointer is moved on top of it. Slices and hotspots define the rollover's active area. When the rollover appears in a Web browser, moving the pointer over the area defined with a slice or hotspot activates the assigned behavior. In a simple rollover, a slice is used to trigger events that occur within the slice object's boundaries. Alternatively, a hotspot can be used to trigger a rollover. Use a slice object to activate the rollover when the area that triggers the rollover is also the area that swaps out. Use a hotspot object on top of a slice object when you want the trigger to be a smaller area within the slice. Use a hotspot or slice object to trigger a rollover in another slice.
<url>html/17Rollovers5.html</url>
<title>Assigning rollover behaviors</title> Assigning rollover behaviors Assign behaviors from the Behaviors inspector to determine what the rollover does when it is activated, and what type of mouse event activates it. To attach a behavior to a selected slice or hotspot: Choose a behavior from the Add Action (+) pop-up menu in the Behaviors inspector. To assign the mouse event that activates the rollover: 1 Select the slice or hotspot containing the behavior you want to modify. 2 In the Behaviors inspector, select the behavior. 3 Next to the highlighted behavior name, choose the pointer activity that will trigger the selected behavior.
<url>html/17Rollovers6.html</url>
<title>Choosing the appropriate behavior</title> Choosing the appropriate behavior These behaviors are available in the Behaviors inspector: Simple Rollover creates a rollover using Frame 1 as the Up state and Frame 2 as the Over state. The Simple Rollover option is actually a behavior group containing Swap Image and Swap Image Restore. Swap Image changes the contents of the specified slice with the contents of another frame under the slice, or the contents of an external file. Swap Image Restore restores the rollover to its default appearance. Set Nav Bar Image sets a slice to be a part of a navigation bar within the current document. Each slice that is part of the navigation bar must have this behavior. The Set Nav Bar Image option is actually a behavior group containing Nav Bar Over, Nav Bar Down, and Nav Bar Restore. Nav Bar Over specifies the Over state for the currently selected slice when it is part of a navigation bar, and optionally specifies the Over While Down state. Nav Bar Down specifies a Down state for the currently selected slice when it is part of a navigation bar. Nav Bar Restore reverts all the other slices in the navigation bar to their Up state. Note: For more information on creating a navigation bar, see Creating a navigation bar using nested symbols . Set Text of Status Bar lets you define text that is displayed in the status bar at the bottom of most browser windows. Behaviors in Fireworks are compatible with Dreamweaver 3 behaviors. When you export a Fireworks rollover to Dreamweaver 3, you can edit Fireworks behaviors using the Dreamweaver 3 Behaviors inspector.
<url>html/17Rollovers7.html</url>
<title>Assigning URL links to rollovers</title> Assigning URL links to rollovers If you want your rollover to link to another Web page, assign a URL link to a hotspot or slice object. To assign a URL link to a selected hotspot or slice object: In the Object inspector, choose or enter a URL in the URL link pop-up menu. Choose a URL from the URL panel.
<url>html/17Rollovers8.html</url>
<title>Creating disjoint rollovers to swap parts of the image</title> Creating disjoint rollovers to swap parts of the image A disjoint rollover changes the appearance of an area that is not underneath the pointer. For an example of a disjoint rollover in a Fireworks file, examine the Tutorial_Final.png file located in the Tutorial folder inside the Fireworks application folder.
<url>html/17Rollovers9.html</url>
<title>Setting a trigger area and a swap area</title> Setting a trigger area and a swap area The first part of creating a disjoint rollover is drawing a hotspot or slice object over the area of your document that will trigger the rollover, and a slice object over the swap area—the area that will change appearance when the rollover is triggered. To draw a trigger area: Draw a hotspot object, slice object, or button symbol: Draw a hotspot object if the trigger area is not a rollover, or does not change appearance itself. Draw a slice object if you intend for the trigger area to change appearance. Place a button symbol if you intend to use it as the trigger. You can attach additional behaviors to button symbols the same way you attach them to slice and hotspot objects. To draw a swap area: Draw a slice object over the part of your document you want to swap out.
<url>html/18Animation1.html</url>
<title>Overview: Creating animation</title> Overview: Creating animation Animated graphics add life to your Web site. You can create a variety of lively animated GIFs in Fireworks, including banner ads, logos, and cartoons. An animated GIF is a series of still images that appear quickly in succession, which creates the illusion of an image in motion. When you build an animation in Fireworks, you place each image in a separate frame. All of the images of an animation are exported to an animated GIF file. In Fireworks, you can open and edit existing animated GIFs, or create new animated GIFs. By gradually changing the content of successive frames, you can make an object appear to move across the canvas, get bigger or smaller, rotate, change color, fade in or out, or change shape. You can use these and other techniques to put together a sophisticated animation that tells an entire story or depicts a realistically moving object, such as a cartoon character, animal, or automobile. To greatly simplify animation, you can convert to symbols those objects that appear in multiple frames in the animation. To create intermediate steps in the location, transformation, or effect of an object, you can use a process called tweening, which automatically draws the intermediate objects and distributes them to frames.
<url>html/18Animation10.html</url>
<title>Sharing layers across frames</title> Sharing layers across frames Layers divide a Fireworks document into discrete planes, like separate tracing paper overlays. With animations, you can use layers to organize objects that are part of the scenery or backdrop for the animation. If you want some objects to appear throughout an animation, you can place them on a layer, and then use the Layers panel to share the layer across frames. You can edit objects on shared layers on any frame; those edits are reflected on all other frames. In this example, the Web Layer and background are shared across frames in the document. To share a layer across frames: 1 Double-click the layer. The Layer Options dialog box opens. 2 Choose the Share Across Frames option. Note: Sharing a layer replaces the contents of that layer in all frames with the contents of that layer in the current frame. To disable sharing a particular layer across frames: 1 Double-click the shared layer. The Layer Options dialog box opens. 2 Deselect the Share Across Frames option. 3 Choose how to copy objects to frames: Leave the contents of shared layer in the current frame only. Copy the contents of shared layer to all frames. Note: The Web Layer, which contains only slice objects and hotspot objects, is always shared across all frames.
<url>html/18Animation11.html</url>
<title>Viewing the frames before and after the current frame</title> Viewing the frames before and after the current frame Use onion skinning to view the contents of frames preceding and following the currently selected frame. Onion skinning helps you smoothly animate frames without having to flip back and forth through frames. The term "onion skinning" comes from a traditional animation technique of using thin, translucent tracing paper to view animated sequences. When onion skinning is turned on, objects in frames before or after the current frame are displayed but are dimmed so that you can distinguish them from objects in the current frame. The darker bird in the middle is in the current frame with the Before and After option active. By default, you can select and edit dimmed objects in other frames without leaving the current frame. To adjust the number of frames that are visible before and after the current frame: 1 In the Frames panel, click the Onion Skinning button. 2 Choose a display option: Choose No Onion Skinning to turn off onion skinning and display only the contents of the current frame. Choose Show Next Frame to display the contents of the current frame and the next frame. Choose Before and After to display the contents of the current and adjacent frames. Choose Show All Frames to display the contents of all frames. Choose Custom to set a custom number of frames and control the opacity of onion skinning. Choose Multi-Frame Editing to select and edit all visible objects. Deselect Multi-Frame Editing to select and edit only objects in current frame.
<url>html/18Animation12.html</url>
<title>Creating or importing elements for animation</title> Creating or importing elements for animation Creating elements for an animation is the same as creating objects for any other graphic. You can also import graphics to use in an animation. Once you have created or imported the graphics for your animation, consider making symbols out of the objects that you intend to use in more than one frame. If you place two or more instances of a symbol on a frame, and change the look or position of one of them, you can use tweening to automatically draw intermediate instances and distribute them across multiple frames.
<url>html/18Animation13.html</url>
<title>An example of using symbols and instances in animation</title> An example of using symbols and instances in animation Symbols are objects that you store in the Library and can easily reuse as copies, called instances. When you edit a symbol object (the original), the instances (copies) update automatically to reflect the changes to the symbol. For more information on creating and using symbols, see Modifying a symbol . A symbol in the Library In the steps below, the word "Cow" has been converted to a Symbol. For example, to animate the word "Cow" across multiple frames: 1 Create a document with three frames. 2 Choose Insert > New Symbol. The Symbol Properties dialog box opens. 3 Name the symbol "Cow," choose Graphic, and click OK. The Symbol Editor opens. 4 Using the Text tool, enter the word "Cow" and format it using a thick font and large letters. 5 Click OK to close the Text Editor. 6 Close the Symbol Editor. An instance of "Cow" appears in Frame 1 and the symbol is added to the Library panel. 7 Place instances of "Cow" in the other frames: Choose Copy to Frames from the Options pop-up to open the Copy to Frames dialog box. Choose All frames and click OK. Select each frame one by one in the Frames panel and drag an instance from the Library panel onto the canvas. 8 Move, transform, or apply Live Effects to the instance on each frame as you want it to appear within the animation. The steps below show how the placement, transformation, and effect characteristics of instances are retained across frames when you change the symbol. To change the word to "Llama" across all frames: 1 Select "Cow" to open the Symbol Editor: Double-click any instance of "Cow" in the document. Double-click the instance of "Cow" in the symbol library. 2 Double-click the text block within the symbol to open the Text Editor. 3 Using the Text Editor, change the text from "Cow" to "Llama" and click OK. The symbol and every instance of that symbol updates to "Llama," but each instance retains its placement, transformation, and effect characteristics—only the text changes.
<url>html/18Animation14.html</url>
<title>Tweening instances</title> Tweening instances Tweening is a traditional animation term that describes the process in which a lead animator draws only the key frames, while assistants draw the frames in between. In Fireworks, tweening blends two or more instances of the same symbol, creating interim instances with interpolated attributes. You can tween the location, transformation, opacity, and effects of individual instances. Tweened from 100% opacity to 25% For example, tween a vertical instance with a horizontal instance to produce objects that rotate progressively to form a blend between the two. To tween instances: 1 Select two or more instances of the same symbol. 2 Choose Modify > Symbols > Tween Instances. 3 Enter the number of tween steps in the Tween Instances dialog box. 4 To distribute the tweened objects to separate frames, choose Distribute to Frames and click OK. Note: If you don't distribute the objects to separate frames, you can do it later by selecting all instances and clicking the Distribute to Frames button in the Layers or Frames panel..
<url>html/18Animation15.html</url>
<title>Controlling the animation</title> Controlling the animation Use the Frames panel to set how the animation will play.
<url>html/18Animation16.html</url>
<title>Setting the frame delay</title> Setting the frame delay The frame delay determines how long the current frame is displayed. Specify frame delay in hundredths of a second. For example, a setting of 50 displays for half a second, while a setting of 300 displays for 3 seconds. To enter a frame delay value for each frame: 1 Open the Frame Properties dialog box: Double-click a frame name in the Frames panel. Highlight a frame name and choose Properties from the Frames panel Options pop-up. 2 Enter a number in the Frame Delay option. 3 Press Enter, or click outside the panel to close the dialog box. To set the frame delay value for more than one frame: 1 Select frames: To select a contiguous range of frames, hold down Shift and select the first and last frame names. To select a discontiguous range of frames, hold down Control (Windows) or Command (Macintosh) and click each frame name. 2 Choose Properties from the Frames panel Options pop-up to open the Frame Properties dialog box. 3 Enter a number for the frame delay. 4 Press Enter, or click outside the panel to close the dialog box.
<url>html/18Animation17.html</url>
<title>Setting the number of times the animation plays</title> Setting the number of times the animation plays The loop setting determines how many times the animation repeats. To set the animated GIF to repeat: 1 Click the Looping button. 2 From the pop-up, choose the number of times you want the animation to repeat after the it plays the first time. If you choose 4, for example, the animation plays the first time, then repeats four more times. To play the animation continuously: 1 Click the Looping button. 2 Choose Forever from the pop-up.
<url>html/18Animation18.html</url>
<title>Showing and hiding frames for playback</title> Showing and hiding frames for playback You can show or hide frames for playback. If a frame is hidden, it will not be displayed during playback and it will not be exported. To show or hide a frame: 1 Double-click the frame in the Frames panel. 2 Deselect Include when Exporting. 3 Press Enter or click outside the pop-up to close it.
<url>html/18Animation19.html</url>
<title>Optimizing an animation</title> Optimizing an animation After you create an animation in Fireworks, you can prepare it for export by optimizing it. For more information on optimizing graphics, see Choosing optimization settings for GIFs and PNGs . To optimize an animation: 1 In the Optimize panel, choose Animated GIF from the Export File Format pop-up. 2 Set the Palette, Dither, or Transparency options. 3 In the Frames panel, set the frame delay for the frames. Setting transparency As part of the optimization process, you can set one or more colors within an animated GIF to display in a Web browser as transparent. This is useful when you want a Web page background color or image to show through the animation. Note: Older Web browsers may not support transparent animated GIFs. To make the canvas color transparent: In the Optimize panel, choose Index Transparency from the Transparency pop-up. To display a color as transparent in a Web browser: 1 Choose Window > Optimize to open the Optimize panel. 2 From the Transparency pop-up, choose either Index Transparency or Alpha Transparency. 3 Use the transparency tools in the Optimize panel to select colors for transparency.
<url>html/18Animation2.html</url>
<title>Planning an animation</title> Planning an animation When you create an animation, it is important to plan the events you want to occur before you begin creating it. Otherwise, you may become lost in frames and layers and the animation may look choppy when it plays. Generally, animation is a five-step process. Your workflow preferences and the animation's design may change the order of these steps. To create an animation: 1 Create a new document. 2 Using the Frames panel, add multiple frames to the document. 3 Draw or place objects on separate frames. 4 Set the frame delay. 5 Optimize and export the document as an animated GIF. For information on exporting as an animated GIF, see Exporting an animation .
<url>html/18Animation20.html</url>
<title>Previewing an animation</title> Previewing an animation You can preview an animation while you are working on it so you can see how it is progressing. Also, you can preview an animation after you optimize it to see how the exported animated GIF will look in a Web browser. To preview an animation in the workspace: Use the frame controls. In Windows, the frame controls appear in the Status bar. On the Macintosh, they appear at the bottom of the document window. Frame controls Note these concepts when previewing animations: To set how long each frame appears in the document window, enter frame delay settings in the Frames panel. Frames that will not be included in the export do not appear when previewing the animation. The animation repeats until you stop it, regardless of the loop settings in the Frames panel. Previewing the animation in the Original document window displays the source graphic at full resolution, not the optimized 8-bit preview used for the exported animated GIF. To preview an animation in the Preview window: 1 Click the Preview tab at the top of the document window. 2 Use the frame controls. Note: Previewing animations in 2-Up or 4-Up previews is not recommended. To preview an animation in a Web browser: Choose File > Preview in Browser, and choose a browser from the submenu. To preview an animation in the Export Preview dialog box: 1 Choose File > Export Preview to open the Export Preview dialog box. 2 Use the frame controls to display the animated GIF exactly as it will be exported. The Export Preview shows looping, optimization, disposal methods, and frame delay. For more information on using the Export Preview dialog box, see Optimizing and previewing during export .
<url>html/18Animation21.html</url>
<title>Exporting an animation</title> Exporting an animation After you create and optimize an animation, it is ready to export as an animated GIF, as multiple files, or as a Flash SWF file. If you export it as a Flash SWF file, you can import it into Macromedia Flash for further editing. For more information, see Exporting to Macromedia Flash . To export as an animated GIF: 1 Choose Animated GIF as part of the optimizing process. For more information, see Choosing optimization settings for GIFs and PNGs . 2 Choose File > Export. 3 In the Export dialog box, type a name for the file and choose the destination. To export as multiple files: 1 Choose File > Export Special > Layer/Frames to Files. 2 In the Export dialog box, choose Frames in the Files From pop-up. 3 Type a base name for the files and specify the destination. To export as a Flash SWF file: 1 Choose File > Export Special > Flash SWF. 2 Click Setup to adjust any export settings and click OK. 3 In the Export Special dialog box, type a name for the file and specify the destination.
<url>html/18Animation22.html</url>
<title>Opening an existing animation</title> Opening an existing animation You can open existing animated GIFs in Fireworks and edit them. When you open an animated GIF, Fireworks does two things: It creates a shared layer named "Background," based on common pixels found in more than half of the imported frames. It places the animated components from each frame into a separate frame, and then places these components as image objects on a layer named "GIF." To edit an animated GIF: 1 Choose File > Open and open an animated GIF file. 2 Choose a frame from the Frames panel. 3 Select an object and begin editing. Note: Changes to objects on a layer that is shared across frames appear on all frames in the document.
<url>html/18Animation23.html</url>
<title>Opening multiple files as an animation</title> Opening multiple files as an animation Fireworks can create an animation based on a group of image files. For example, you can create a banner ad based on several existing graphics by opening each graphic and placing it on a separate frame in the same document. To open multiple files as an animation: 1 Choose File > Open Multiple. The Open Multiple Files dialog box appears. 2 Navigate to the files and add files to open as frames in the animation. To add a file to the list, click Add. To add all files in the current folder to the list, click Add All. To remove a file from the added file list, choose a file from the added file list and click Remove. 3 Choose Open as Animation and click OK. Fireworks opens the files in a single document, placing each file in a separate frame in the order in which you chose them in the Open Multiple Files dialog box.
<url>html/18Animation3.html</url>
<title>Creating objects for the animation</title> Creating objects for the animation Objects perform the action in an animation like cast members in a movie. For example, in an animation of three geese flying across the sky, each goose is a cast member. You can draw or import objects that you want to use. In many cases, you will save time by converting objects to symbols. Tweening between instances and distributing them to frames can be much faster than placing individual objects on each frame. For more information on symbols and tweening, see Tweening instances .
<url>html/18Animation4.html</url>
<title>Setting the animation speed</title> Setting the animation speed As you plan an animation, you must consider the rate at which the frames will switch from one to the next. This is called the frame delay. A frame delay that is too long makes the animation appear to stop and start; a frame delay that is too short blurs the details of the animation. The complexity of the animation and the speed of the computer on which the animation is being played affect the smoothness of the playback. If possible, test your animation on a variety of computers to determine optimum frame delay. For information on setting animation speed, see Controlling the animation .
<url>html/18Animation5.html</url>
<title>Planning frames</title> Planning frames Although you can always add or delete frames as you create an animation, it is a good idea to set up a plan specifying when you want key events to occur. Using a frames-per-second rate such as five frames per second, you can build the animation structure by creating a certain number of frames. For example, if you want a company name to fade in to view within roughly three seconds, and the frame delay is set at 20 hundredths of a second, you will need 15 frames. For more information on frames, see Managing frames .
<url>html/18Animation6.html</url>
<title>Organizing animations with layers</title> Organizing animations with layers In addition to moving objects, many animations contain static objects that form the scenery and backdrop for the animation. You can place these static objects on layers, which can be shared across frames so that those objects appear in every frame.
<url>html/18Animation7.html</url>
<title>Managing frames</title> Managing frames Fireworks animations divide lengths of time into frames like a film strip. You compose the individual frames in the movie. The Frames panel is where you create and organize frames. You can set the timing of the animation and move objects from one frame to another.
<url>html/18Animation8.html</url>
<title>Adding, moving, copying, and deleting frames</title> Adding, moving, copying, and deleting frames You can add, copy, delete, and change the order of frames in the Frames panel. To add a new frame after the current frame: Click the New/Duplicate Frame button at the bottom of the Frames panel. To add a frame to a specific place in the sequence: 1 Choose Add Frames from the Frames panel Options pop-up. The Add Frames dialog box opens. 2 Enter the number of frames to add and choose where to insert them. To make copies of a frame: Drag an existing frame to the New/Duplicate Frame button at the bottom of the Frames panel. To copy a selected frame and place it in a sequence: 1 Choose Duplicate Frame from the Frames panel Options pop-up. The Duplicate Frames dialog box opens. 2 Enter the number of duplicates to create for the selected frame, and choose where the duplicate frames will be inserted. Duplicating a frame is useful when you want objects to reappear in another part of the animation. To reorder frames: Drag them one by one to a new location in the list.
<url>html/18Animation9.html</url>
<title>Moving and deleting selected objects in the Frames panel</title> Moving and deleting selected objects in the Frames panel In the Frames panel, you can move selected objects to a different frame. You can also delete selected objects using the Frames panel. To move an object to a different frame: 1 Select the object. 2 In the Frames panel, drag the blue square on the right of the frame to the new frame. To delete the selected frame: Click the Delete Frame button in the Frames panel. Drag the frame to the Delete Frame button. Choose Delete Frame from the Frames panel Options pop-up.
<url>html/19Automating1.html</url>
<title>Overview: Automating repetitive tasks</title> Overview: Automating repetitive tasks Web designers often get bogged down in repetitive tasks, such as optimizing images or converting images to fit within certain constraints. Part of the power of Fireworks is its ability to automate and simplify many tedious drawing, editing, and file conversion tasks. To speed up your editing process, use Find and Replace to search for and replace elements within a file, or elements from multiple files. Find and replace elements such as URLs, fonts, color, and text. Use Batch Process to convert groups of image files into other formats, or to change their color palettes. Batch Process can apply custom optimization settings to groups of files. You can also resize a group of files, making Batch Process an ideal tool for creating thumbnails. Use the History panel to create commands that are shortcuts for commonly used features, or to create a script that can perform a complex series of steps. Fireworks can understand and execute JavaScript, so advanced users can automate very complex tasks by writing JavaScript commands and then executing them within Fireworks. You can control nearly every Fireworks command or setting through JavaScript using special JavaScript commands that Fireworks can interpret.
<url>html/19Automating10.html</url>
<title>Finding and replacing URLs</title> Finding and replacing URLs Choose Find URL from the Find pop-up menu of the Find and Replace panel to search for and replace URLs assigned to Web objects in Fireworks documents. You can also choose options that further define the search: Whole Word finds the text in the same form as it appears in the Find option, and not as part of any other word. Match Case distinguishes between uppercase and lowercase letters when searching text. Regular Expressions uses regular expressions when searching. Use regular expressions to match parts of words or numbers conditionally during a search. For more information on using regular expressions, see http://developer.netscape.com/docs/manuals/communicator/jsguide/regexp.htm.
<url>html/19Automating11.html</url>
<title>Finding and replacing non-Websafe colors</title> Finding and replacing non-Websafe colors A non-Websafe color is a color not included in the Web216 color palette. Choose Find Non-Web216 from the Find pop-up menu of the Find and Replace panel to search for all non-Websafe colors and replace them with Websafe colors. Note: Find Non-Web216 does not find or replace pixels within image objects.
<url>html/19Automating12.html</url>
<title>Batch processing</title> Batch processing Batch processing is a convenient way to automatically convert a group of graphic files. When batch processing, choose from these options: Convert a selection of files to another format. Convert a selection of files to the same format with different optimization settings. Scale exported files. Find and replace text, colors, URLs, or fonts. To batch process files: 1 Choose File > Batch Process. 2 Choose the files to process: Current Open Files batch processes all open documents. Project Panel (All Files) batch processes all files listed in the Project Log panel. Project Panel (Selected Files) batch processes the files currently selected in the Project Log panel. Custom displays the Open Multiple dialog box and allows you to select files to batch process. 3 Choose Actions to perform during the batch process. Find and Replace finds and replaces text, URLs, colors, or fonts in the batch-processed files. Export changes export settings, naming conventions, and scaling options applied to the batched files. 4 Choose backup options for the original files. To create backup copies of the original files, check Backup Original Files and choose settings in the Save Backups dialog box. 5 Click OK to run the batch process. For information about making scripts of a batch process, see Saving batch processes as Scriptlets . Click Cancel to cancel the batch process.
<url>html/19Automating13.html</url>
<title>Finding and replacing during a batch process</title> Finding and replacing during a batch process Check Find and Replace in the Batch Process dialog box to find and replace text, fonts, colors, or URLs when batch processing. When you check Find and Replace, the Batch Replace dialog box appears, prompting you to enter elements to find and replace during the batch process. Batch Replace only affects the following file formats: Fireworks PNG, Illustrator, FreeHand, and CorelDRAW. Batch Replace does not affect GIFs and JPEGs. To select attributes to find and replace during a batch process: 1 Select the type of attribute to find and replace from the Find pop-up menu and choose settings. 2 In the Find option, enter or choose the specific element to find. 3 In the Change To option, enter or choose the specific element to use to replace found items. 4 To add changed files to the Project Log so they will be easy to locate later, choose Update Project Log. 5 Click OK to store Find and Replace settings and return to the Batch Process dialog box. For more information about Find and Replace options, see Finding and replacing . Note: While you can find and replace URLs during a batch process, no new HTML files are generated.
<url>html/19Automating14.html</url>
<title>Changing file settings with a batch process</title> Changing file settings with a batch process You can change file type, file optimization, or scaling settings when performing a batch process by checking Export in the Batch Process dialog box. When you check Export, the Batch Export dialog box appears, prompting you to enter settings to apply during the batch process. To set export settings to apply to files during a batch process: 1 From the Batch Process dialog box, choose Export or click the browse button (...) to open the Batch Export dialog box. 2 From the Export Settings pop-up menu of the Batch Export dialog box, choose an option: Choose Use Settings from Each File to use each file's previous export settings during the batch process. For example, when batch processing a folder of GIFs and JPEGs, the resulting files will still be GIFs and JPEGs, and the original palette and compression settings are used when exporting each file. Choose Custom or click the Custom Edit button to open the Export Preview dialog box and enter custom export settings for the batch process. Choose a preset export setting or a previously saved user export setting to use for the batch process. All preset settings and saved user export settings appear in the Export Settings pop-up menu. 3 Click OK to return to the Batch Process dialog box and finish the batch process. To set naming options for batch-processed files: 1 In the Batch Process dialog box, choose Export or click the browse (...) button. 2 In the File Name pop-up menu of the Batch Export dialog box, choose an option: Choose Original Name to leave file names unchanged. Choose Add Prefix and enter text in the File Name text box to add the specified text to the beginning of the file name of each batch processed file. Choose Add Suffix and enter text in the File Name text box to add the specified text to the end of the file name before the file extension. For example, if "_thumb" is entered in the File Name text box, then the file Soerbaird.gif would be renamed to Soerbaird_thumb.gif when it is batch processed. 3 Click OK to return to the Batch Process dialog box and finish the batch process. To set scaling options for batch-processed files. 1 In the Batch Process dialog box, choose Export or click the browse (...) button. 2 In the Scaling pop-up menu of the Batch Export dialog box, choose an option: Choose No Scaling to export the files unaltered. Choose Scale to Size and enter a width and height to scale images to an exact width and height. Choose Scale to Size and enter or choose a value in either the Horizontal Scaling option or Vertical Scaling option to scale images proportionally but restrict width or height. For example, to proportionally scale images to be 50 pixels wide, type 50 in the Horizontal Scaling option and choose Variable in the Vertical Scaling option. Choose Scale to Fit Area and enter Max Width and Max Height to proportionally scale images so that they each fit within a specified width and height range. Note: Choose Scale to Fit Area to convert a group of images to thumbnail images. Choose Scale to Percentage to scale images by percentage. 3 Click OK to return to the Batch Process dialog box and finish the batch process.
<url>html/19Automating15.html</url>
<title>Backing up batch-processed files</title> Backing up batch-processed files You can save backup copies of the original files from a batch process. Backup copies of files are placed in an Original Files subfolder in the same folder as each original file. To back up batch-processed files: 1 Choose Backup Original Files in the Batch Process dialog box or click the ellipsis button. The Save Backups dialog box opens. 2 In the Save Backups dialog box, choose how you want to back up the files: Overwrite Existing Backups keeps only one copy of the previous file. When you run a new batch process, the old backup copy is replaced by the new backup copy. Incremental Backups keeps copies of all the backup files. When you run a new batch process, a number is appended to the end of the file name of the new backup copy. For example, if a file called Picture.gif was being backed up using Incremental Backups, the first time the batch process runs, a file called Picture.gif would be copied to an Original Files subfolder. The second time a batch process is run on Picture.gif, a file called Picture-1.gif would be copied to the Original Files subfolder. The third time the file would be called Picture-2.gif, and so on. Note: If Backup Original Files is deselected, batch processing to the same file format overwrites the original file. However, batch processing into a different file format creates a new file in that format and does not move or delete the original file. 3 Click OK to return to the Batch Process dialog box and finish the batch process.
<url>html/19Automating16.html</url>
<title>Saving batch processes as Scriptlets</title> Saving batch processes as Scriptlets Save batch process settings as cross-platform Scriptlets to easily recreate the batch process multiple times in the future. To create a batch Scriptlet: 1 Choose File > Batch Process. 2 Choose settings in the Batch Process dialog box. 3 Choose the Actions to perform and choose settings in the Batch Replace and Batch Export dialog boxes. Each time the saved Scriptlet is run, Fireworks asks which files are to be batch processed. 4 Click Script in the Batch Process dialog box. 5 Enter a name and destination for the Scriptlet and click OK. Note: If you save your Scriptlet in the Fireworks 3\Settings\Commands folder, your Scriptlet appears in the Commands menu. To run a batch Scriptlet: 1 Choose File > Run Script. 2 Select a Scriptlet. 3 In the Files to Process dialog box, choose the files to process with the Scriptlet, and click OK. For more information on choosing files, see Batch processing .
<url>html/19Automating17.html</url>
<title>Running Scriptlets by dragging and dropping</title> Running Scriptlets by dragging and dropping If you have a batch process that you repeat frequently, save it as a Scriptlet then drag and drop that Scriptlet from your hard drive to the Fireworks executable to run the batch process. Dragging a Scriptlet file plus readable files or folders to the Fireworks application launches Fireworks and immediately processes those files. Dragging multiple Scriptlet files and multiple graphic files onto Fireworks processes the graphics files multiple times, once for each script.
<url>html/19Automating18.html</url>
<title>Scripting</title> Scripting You can reduce the tedium of some repetitive tasks by creating macro scripts in Fireworks. Just perform the steps in Fireworks you want in a script, then use the History panel to save them as commands. Or, write your own JavaScript code in a text editor to run within Fireworks. Use scripts for tasks such as applying changes to text; applying colors, strokes, and fills; changing document size and resolution; setting a specific canvas color; or applying multiple effects or distortions to several objects. You can control nearly every command or setting in Fireworks through JavaScript using special JavaScript commands that Fireworks can interpret.
<url>html/19Automating19.html</url>
<title>Extending Fireworks</title> Extending Fireworks Macromedia Dreamweaver 3 also uses JavaScript. You can write scripts that control Fireworks from within Dreamweaver 3. For documentation on the JavaScript API, visithttp://www.macromedia.com/support.
<url>html/19Automating2.html</url>
<title>Finding and replacing</title> Finding and replacing Use Find and Replace to search for and replace elements in a document such as text, URLs, fonts, and colors. Find and Replace can search the current document or multiple files. As you use Find and Replace, Fireworks can track and store a log of the changes in the Project Log panel. Find and Replace only works in Fireworks PNG files, or in files containing vector objects, such as FreeHand, CorelDRAW, and Illustrator files. Find and Replace panel To find and replace elements of a document: 1 Open the document. 2 Choose Edit > Find and Replace to open the Find and Replace panel. 3 From the Search option, choose a source for the search. 4 From the Find pop-up menu, choose an attribute for which to search. 5 Set Find and Change To options. 6 Choose the type of find and replace you want to conduct: Find locates the next instance of the element. Found elements appear selected in the document. Replace changes a found element with the contents of the Change To option. Replace All finds and replaces every occasion of a found element throughout the search range. Note: Replacing objects in multiple files saves those files; you cannot reverse the change using Edit > Undo.
<url>html/19Automating20.html</url>
<title>Creating command scripts using the History panel</title> Creating command scripts using the History panel The History panel records a list of the steps you perform while working in Fireworks. Each step is stored on a separate line of the History panel, from top to bottom. By default, the panel remembers 20 steps. Save groups of steps in the History panel as a command that you can reuse. Saved commands are stored as JSF files in theFireworks 3\Settings\Commands folder. You can execute saved commands in any Fireworks document; they are not document-specific. To undo steps using the History panel: Drag the Undo Marker up the panel until you reach the last step you want to undo. Click along the Undo Marker track. Undone steps remain in the History panel highlighted in gray. To redo undone steps: Drag the Undo Marker up the panel until you reach the last step you want to restore. Click along the Undo Marker track. To change the number of steps recorded by the History panel: 1 Choose File > Preferences. 2 Change the number of Undo Steps to the number of steps you want the History panel to record. Note: Additional steps require more RAM. To clear all steps from the History panel: Choose Clear History from the History panel Options pop-up menu in order to free memory and disk space. Clearing steps from the History panel removes your ability to Undo edits. To save steps as a command: 1 Choose the steps to save as a command: Click a step, then Shift-click another step to select a range of steps to save as a command. Control-click (Windows) or Command-click (Macintosh) to select discontiguous steps. 2 Save the command: Click the Save button at the bottom of the History panel. Choose Save as Command from the History panel Options pop-up menu. 3 Enter a name for the command and click OK. The command appears on the Commands menu.
<url>html/19Automating21.html</url>
<title>Playing steps or commands</title> Playing steps or commands You can execute recorded commands or a selection of steps in the History panel anytime. To playback a saved command: 1 If necessary, select an object. 2 Choose the command from the Commands menu. To replay a selection of steps: 1 Select one or more objects. 2 Choose the steps in the History panel. 3 Play the steps: Click the Replay button at the bottom of the History panel Choose Replay Selected Steps from the History panel Options pop-up menu. Steps marked with an X are nonrepeatable and cannot be played back. Separator lines indicate that a selection change has occurred. Commands created from steps that cross a separator line can produce unpredictable results. To apply selected steps to objects in many documents: 1 Select a range of steps. 2 Copy the steps: Click the Copy button at the bottom of the History panel. Choose Copy Steps from the History panel Options pop-up menu. 3 Select one or more objects in any Fireworks document. 4 Choose Edit > Paste. To repeat the last step: Choose Edit > Repeat.
<url>html/19Automating22.html</url>
<title>Renaming and deleting commands</title> Renaming and deleting commands You can rename or delete commands that appear in the Commands menu. To rename a command: 1 Choose Commands > Edit Command List. The Edit Command List dialog box opens. 2 Select a command. 3 Click Rename, enter a new name, and click OK. To delete a command from within Fireworks: 1 Choose Commands > Edit Command List. The Edit Command List dialog box opens. 2 Select a command and click Delete. To delete a command from outside of Fireworks: Delete the JSF file for the command from the Fireworks 3\Settings\Commands folder.
<url>html/19Automating23.html</url>
<title>Editing or customizing a script</title> Editing or customizing a script Command scripts are saved as JavaScript. You can open and edit them in any text editor, such as NotePad (Windows) or SimpleText (Macintosh). You can write scripts in JavaScript and use Fireworks-specific commands to control Fireworks commands and settings. To edit selected steps as JavaScript in a text editor: 1 Select a range of steps. 2 Copy the steps: Click the Copy button at the bottom of the History panel. Choose Copy Steps from the History panel Options pop-up menu. 3 Switch to a text editing application. 4 Paste the steps.
<url>html/19Automating3.html</url>
<title>Selecting the source for the search</title> Selecting the source for the search Fireworks can perform a find and replace in any of five locations. Choose an option from the Search pop-up menu to select the range of content you want to find and replace: Search Selection finds and replaces elements only among the currently selected objects and text. Search Frame finds and replaces elements only within the current frame. Search Document finds and replaces elements in the active document. Search Project Log finds and replaces elements in files listed in the Project Log. For more information about the Project Log, see Managing searches with the Project Log . Search Files finds and replaces elements across multiple files. If you choose Search Files, navigate to a file you want to search, and then click Add to add that file to the find and replace list; click Add All to add all files in the current folder to the find and replace list.
<url>html/19Automating4.html</url>
<title>Finding and replacing in multiple files</title> Finding and replacing in multiple files When finding and replacing among multiple files, choose Replace Options from the Options pop-up menu to set how multiple open files are handled after the search. To save and close each file after it is searched: 1 Choose Replace Options from the Options pop-up menu of the Find and Replace panel. 2 Check Save and Close Files in the Replace Options dialog box then click OK. Each file is saved and closed after the find and replace. Only the original active documents remain open. Note: If Save and Close is disabled, and you batch process a large number of files, Fireworks may run out of memory and abort the batch process. 3 Choose whether to create backups of changed files from a find and replace, from the Backups pop-up menu: To Find and Replace without backing up the original files, choose No Backups. The changed files replace the original files. To create and store only one backup copy of each file changed during a find and replace, choose Overwrite Existing Backups. If you perform additional find and replace operations, the previous original file always replaces the backup copy. The backup copies are stored in a subfolder called Original Files. To save all backup copies of files changed during a Find and Replace, choose Incremental Backups. The original files are moved to an Original Files subfolder within their current folder, and an incremental number is appended to each file name. If you perform additional find and replace operations, the original file is copied to the Original Files folder, and the next higher number is added to its file name. For example, for a file named Drawing.png, the first time you run a find and replace, the backup file is named Drawing-1.png. The second time you run a find and replace, the backup file is named Drawing-2.png, and so on.
<url>html/19Automating5.html</url>
<title>Managing searches with the Project Log</title> Managing searches with the Project Log The Project Log helps track and control changes you make in multiple files when using Find and Replace or when batch processing. Any documents changed during a Find and Replace are recorded in the Project Log. Use the Project Log to navigate through selected files, export selected files using their last export settings, or select files to be batch-processed. The Project Log records each changed document and displays the frame of the document that contains the change, as well as the date and time of the change. Manually add files to the Project Log in order to retain files that you plan to edit frequently. To manually add files to the Project Log: 1 Choose Window > Project Log. 2 Choose Add Files from the Project Log Options pop-up menu and navigate to the file you want to add. 3 Select the file you want to add. 4 Click Add. To open files listed in the Project Log: Choose a file listed in the Project Log and click Open. Double-click a file listed in the Project Log. To remove an entry from the Project Log: Choose one or more entries and choose Clear Selection from the Project Log Options pop-up menu. To remove all entries from the Project Log: Choose Clear All from the Project Log Options pop-up menu. To export a file listed in the Project Log using its last export settings: Select a file or files in the Project Log and choose Export Again from the Project Log Options pop-up menu.
<url>html/19Automating6.html</url>
<title>Viewing and printing the Project Log</title> Viewing and printing the Project Log The latest version of the Project Log is stored as an HTML file in the Fireworks 3\Settings folder. Open the Project_Log.htm file in a browser to view or print the Project Log.
<url>html/19Automating7.html</url>
<title>Finding and replacing text</title> Finding and replacing text Choose Find Text from the Find pop-up menu of the Find and Replace panel to search for and replace words, phrases, or text strings in Fireworks documents. In the Find option, enter the text to search for. Enter the replacement text in the Change To option. You can also choose options that further define the search: Whole Word finds the text in the same form as it appears in the Find option, and not as part of any other word. Match Case distinguishes between uppercase and lowercase letters when searching text. Regular Expressions uses regular expressions when searching. Use regular expressions to match parts of words or numbers conditionally during a search. For more information on using regular expressions, see http://developer.netscape.com/docs/manuals/communicator/jsguide/regexp.htm.
<url>html/19Automating8.html</url>
<title>Finding and replacing fonts</title> Finding and replacing fonts Choose Find Font from the Find pop-up menu of the Find and Replace panel to search for and replace fonts in one or more Fireworks documents. Specify the font or font characteristics in the Find and Change To areas. Specify the font or font characteristics to replace found fonts in the Change To area. Min sets the minimum point size of the selected font to find. Max sets the maximum point size of the selected font to find.
<url>html/19Automating9.html</url>
<title>Finding and replacing colors</title> Finding and replacing colors Choose Find Color from the Find pop-up menu to search for and replace colors in Fireworks documents. Choose an item from the Apply to pop-up menu to determine how the colors found in the find and replace are applied: Fills finds and replaces a fill color, except within pattern fills. Strokes finds and replaces stroke colors only. Fills and Strokes finds and replaces both fill and stroke colors. Effects finds and replaces effect colors only. All Properties finds and replaces fill, stroke, and effect colors.
<url>html/20Dreamweaver1.html</url>
<title>Overview: Working with Dreamweaver and other HTML editors</title> Overview: Working with Dreamweaver and other HTML editors Chances are, an image exported from Fireworks is destined to appear on a Web page. That means the link to that image, and all the JavaScript or HTML table code necessary to make rollovers function, has to be placed in an HTML document. Fireworks can export an HTML document containing all that code. However, most designers rarely build Web pages from the HTML document created by Fireworks. Usually, that code is grafted into existing HTML documents. Since Fireworks-generated HTML often contains advanced JavaScript or tables for rollovers and slicing, placing the correct parts of a Fireworks HTML document into the correct sections of the destination HTML file is essential. Many Web designers use an HTML editing tool such as Macromedia Dreamweaver, Adobe GoLive, or Microsoft FrontPage. Fireworks simplifies the task of putting your HTML into an HTML editor with a variety of HTML export styles that cater specifically to several of the leading editors. If you use Macromedia Dreamweaver 3 along with Fireworks, you can take advantage of several unique features that integrate the two applications, including interchangeable behaviors, sophisticated tracking of file updates, and even automatic HTML updates.
<url>html/20Dreamweaver10.html</url>
<title>Editing Fireworks HTML output styles</title> Editing Fireworks HTML output styles If you want to create your own custom HTML output styles, you can add, remove, or edit HTML output styles by making changes to templates located in the Fireworks 3\Settings\HTML Code folder. Template files are written in JavaScript, which executes during export. Note: A working knowledge of JavaScript is required to successfully edit a template. If an edited template file contains any errors in the JavaScript, the export process stops. Fireworks does not correct JavaScript errors; it only executes valid JavaScript code when exporting. You can edit Fireworks output styles to customize exported HTML. In addition, use JavaScript to create dialog boxes or alerts when exporting. For example, you could create a dialog box that opens during export, allowing you to enter a custom title for the HTML page exported or generate custom HTML code for specific tasks. To add an output style: 1 Create, duplicate, or place a new folder in the Fireworks 3\Settings\HTML Code folder. 2 Place your custom versions of the Imagemap.htt, Slices.htt, and ServerMap.mtt files in the new folder. The new folder name determines the name of the style as it appears in the HTML Output pop-up menu. To remove an output style: Move or delete the folder of the unwanted style from the Fireworks 3\Settings\HTML Code folder. To edit an output style: 1 In the Fireworks 3\Settings\HTML Code folder, open the folder of the style you want to edit. 2 Open the template in a text editor, enter changes, and save. Be sure to use the same name and path when saving the document.
<url>html/20Dreamweaver11.html</url>
<title>Placing Fireworks files in Dreamweaver</title> Placing Fireworks files in Dreamweaver Another way to place Fireworks images or HTML files in a Dreamweaver document is to import the Fireworks images or HTML files from within Dreamweaver 3. To place Fireworks images into a Dreamweaver 3 document: 1 Export images from Fireworks to a Web format as GIF, JPEG, or PNG files. 2 In Dreamweaver, choose Insert > Image. 3 In the Dreamweaver Select Image Source dialog box, navigate to an image you just exported from Fireworks. To place Fireworks HTML files in a Dreamweaver 3 document: 1 In Dreamweaver, choose Insert > Media > Fireworks HTML. 2 In the Insert Fireworks HTML dialog box, navigate to an HTML document generated by Fireworks. 3 If you want to delete the imported Fireworks HTML document from your hard drive when you import it into Dreamweaver, choose Delete File After Insertion. 4 Click OK. The Fireworks HTML is placed within the Dreamweaver document. All of the associated images are imported as well, and any corresponding JavaScript is incorporated into your Dreamweaver page.
<url>html/20Dreamweaver12.html</url>
<title>Pasting a Fireworks HTML file into another HTML file</title> Pasting a Fireworks HTML file into another HTML file If you are using an HTML editor other than Dreamweaver or GoLive, or if the HTML is being added to HTML documents on another computer, you may have to copy and paste HTML code from the Fireworks HTML file into another HTML file. When doing so, export the HTML using the Generic output style. Fireworks inserts comments into exported HTML that help you identify the beginning and end of code for specific items, such as tables and rollovers. When copying HTML exported from Fireworks, it is important to paste it to the correct place within the destination HTML document. When copying and pasting Fireworks HTML into other HTML documents, you do not have to copy the <HTML> or <BODY> tags. Those tags should already be included in the destination HTML document.
<url>html/20Dreamweaver13.html</url>
<title>Copying JavaScript into an HTML file</title> Copying JavaScript into an HTML file When Fireworks exports HTML with JavaScript behaviors, the exported HTML includes JavaScript code for executing behaviors, as well as all other necessary HTML. When pasting JavaScript into other HTML files, be sure to do the following: Paste the entire <SCRIPT> section between the <HEAD> and </HEAD> tags. Be sure that the script section begins with <SCRIPT> and ends with </SCRIPT> . If a script section is present in the destination HTML file, do not copy the <SCRIPT> tags; copy the code from the source script and paste it at the end of the destination <SCRIPT> section, before the </SCRIPT> tag. Paste the image's tag in the <BODY> section where you want the image to appear on the page.
<url>html/20Dreamweaver14.html</url>
<title>Copying HTML for client-side image maps</title> Copying HTML for client-side image maps HTML exported by Fireworks for client-side image maps includes a link to the graphic and <MAP> information to define the image map's hotspot areas. When pasting image maps into other HTML documents, be sure to do these things: Paste the image's link into the <BODY> section of the destination HTML document where you want the image map to appear on the page. Paste everything in the <MAP> section immediately after the link to the graphic.
<url>html/20Dreamweaver15.html</url>
<title>Copying HTML for sliced documents</title> Copying HTML for sliced documents When exporting slices of an image, the HTML exported by Fireworks includes a table that reassembles slices on a Web page. If you export JavaScript rollovers or image maps with your slices, then the HTML also includes JavaScript code and a <MAP> section. When pasting a sliced graphic into other HTML documents, be sure to do these things: Paste all of the <TABLE> section, including the tags, where you want the sliced graphic to appear on the page. Paste any JavaScript into the <SCRIPT> section, or paste the entire <SCRIPT> section between the <HEAD> and </HEAD> tags. Paste any <MAP> sections immediately after the </TABLE> tag for the sliced graphic.
<url>html/20Dreamweaver16.html</url>
<title>Editing Fireworks images placed in Dreamweaver</title> Editing Fireworks images placed in Dreamweaver Edit Fireworks images placed in Dreamweaver by launching Fireworks from Dreamweaver and editing the image. Edit GIFs and JPEGs from within Dreamweaver using a Fireworks source file or optimize the image without affecting the source. Before you launch and edit, be sure to set Fireworks as an external editor in Dreamweaver. To set Fireworks as an external editor for Dreamweaver 2: 1 In Dreamweaver 2, choose Edit > Preferences > External Editors. 2 Set Fireworks as the Image Editor. To set Fireworks as an external editor for Dreamweaver 3: 1 In Dreamweaver 3, choose Edit > Preferences > External Editors. 2 Select a file type to associate with Fireworks, GIF, JPEG, or PNG. 3 If Fireworks 3 does not already appear as the Editor, click the Add Editor button, browse to the Fireworks 3 application, and click Open. Fireworks 3 appears in the Editors list. 4 If you want to make Firworks the primary editor for the selected image format, select Fireworks 3 and click Make Primary. To launch and edit Fireworks graphics that are placed in Dreamweaver 2 or 3: 1 In Dreamweaver, choose Window > Properties to open the Properties inspector if necessary. 2 Launch Fireworks: Select an image and click Edit in the Properties inspector. In Dreamweaver 3 only, right-click (Windows) or Control-click (Macintosh) the image, and choose Edit With Fireworks 3. Dreamweaver launches Fireworks, if it is not already open. 3 At the prompt to use an existing Fireworks document as the source of the graphic: Click Yes if a Fireworks source PNG file exists, browse to the PNG source file if necessary, and click OK. Click No if no Fireworks source file exists or if you only want to edit the bitmap image placed in Dreamweaver. 4 Edit the graphic in Fireworks. 5 Choose File > Update. When Dreamweaver launches and edits a graphic in Fireworks, Update replaces Save in the File menu. Choosing Update exports the image using the last Export Preview settings, replaces the GIF or JPEG used by Dreamweaver, and saves the PNG source file if a source file was selected. 6 Close the Fireworks document. 7 Switch to Dreamweaver. The placed image updates to reflect the changes you made in Fireworks. Note: Do not launch Dreamweaver to edit a sliced table or rollover that was created in Fireworks. Instead, edit the original Fireworks source file and choose File > Update HTML from within Fireworks to update the HTML and images in Dreamweaver.
<url>html/20Dreamweaver17.html</url>
<title>Optimizing Fireworks graphics placed in Dreamweaver</title> Optimizing Fireworks graphics placed in Dreamweaver You can easily change the optimization settings of a Fireworks image placed in Dreamweaver by launching Fireworks from Dreamweaver and changing the settings in the Export Preview dialog box. To optimize a Fireworks image placed in Dreamweaver: 1 In Dreamweaver 2 or 3, choose Command > Optimize in Fireworks. 2 At the prompt to use an existing Fireworks document as the source of the graphic: Click Yes if a Fireworks source PNG file exists, browse to the PNG source file if necessary, and click OK. Click No if no Fireworks source file exists or if you only want to edit the bitmap image placed in Dreamweaver. 3 In the Fireworks Export Preview, enter optimization settings, then click Update. The updated image is saved over the old one in your Dreamweaver folder, and the image placed in Dreamweaver updates to reflect the change.
<url>html/20Dreamweaver18.html</url>
<title>Some HTML basics</title> Some HTML basics HTML files are essentially text files that contain these elements: Text that appears on the Web page. HTML tags that define document formatting and structure, and link to images and other HTML documents (Web pages). HTML tags are enclosed in brackets and look something like this: <tag> affected text </tag> Like the example above, most HTML tags use both an opening tag and a closing tag, which define the beginning and ending of the affected text. Some tags, however, need only an opening tag. Many tags allow you to add variables to control how the tag affects the selected range of text. For example: <font color="blue">Fireworks</font> This tag colors the word "Fireworks" blue.
<url>html/20Dreamweaver19.html</url>
<title>Common HTML tags</title> Common HTML tags Most HTML documents contain these tags: <HTML></HTML> mark the beginning and ending of the HTML document. <HEAD></HEAD> contains the <META> , <TITLE> , and <SCRIPT> tags. <META></META> store extra information about the HTML document such as the application that created it, keywords for search engines, and other information used by various applications. Many HTML editors or utilities add meta information to an HTML document. <SCRIPT></SCRIPT> mark the beginning and end of code for a scripting language such as JavaScript. <TITLE></TITLE> set the name of the document that appears on the top of the Web browser window. <BODY></BODY> denote a section with text or links that appear in the main body of the document. <IMG> displays an image on the Web page. For example: <IMG SRC="Picture.gif"> This tag would display the image Picture.gif on the page. <A></A> create a link from text or an image to another HTML document. For example: <A HREF="http://www.macromedia.com">Link</A> In this case, clicking the word ¨Link¨ in the Web browser jumps to www.macromedia.com. To place an image and make that image a link, use two tags: <A HREF="http://www.getfireworks.com"><IMG SRC="Explosion.jpg"> </A> These tags would display the image Explosion.jpg on the Web page. Clicking the image navigates to www.getfireworks.com. Note that the link to the image is placed within the link tags, between <A> and </A>. <MAP></MAP> denote information that describes the shape of a hotspot using coordinates and contains the URL destination of the hotspot. Note: For more explanation on specific HTML tags and their usage, consult available books or Web sites about HTML.
<url>html/20Dreamweaver2.html</url>
<title>Planning your Web site</title> Planning your Web site When exporting from Fireworks, consider the structure of the Web site where the Fireworks images will go. When Fireworks writes HTML or JavaScript, it references the destination you choose for the image files and the HTML file when exporting. In Dreamweaver, you work on a local copy of the Web site that mirrors the site as it will be when you upload it to your Web server. It is usually best to export your Fireworks files directly into the working folder of your Dreamweaver site.
<url>html/20Dreamweaver3.html</url>
<title>Fireworks HTML overview</title> Fireworks HTML overview Fireworks-generated HTML always contains a link to the exported image and HTML that sets the background color for the Web page to be the same as the canvas or matte color in the exported graphic. Fireworks can export all the HTML and JavaScript needed to create image maps, rollovers, status bar messages, and other actions defined using the Behaviors inspector. Also, Fireworks exports the HTML table for reassembling sliced images. View Fireworks HTML files by opening them in a Web browser. You can edit HTML files by opening them in a text editor, such as NotePad (Windows) or SimpleText (Macintosh), or in a Web authoring tool such as Dreamweaver.
<url>html/20Dreamweaver4.html</url>
<title>Using the Update HTML command</title> Using the Update HTML command The easiest way to place or update Fireworks HTML code into another HTML file on the same computer is by using File > Update HTML. When you place HTML in this manner, Fireworks updates the HTML code and JavaScript, and it also exports images referenced by that HTML so that they replace their previous versions. To update Fireworks HTML placed in another HTML file: 1 Choose File > Update HTML. 2 Navigate to the HTML file you wish to update and click Open. Fireworks updates the HTML table or tables and JavaScript in the HTML document. Fireworks also exports the images and places them in the correct folder, as referenced in the HTML file you are updating. If Fireworks cannot find matching HTML to update, it will give you the option of inserting the new HTML into the designated document. Fireworks inserts it into the file, placing the JavaScript section at the beginning of the document and placing the HTML table or link to the image at the end.
<url>html/20Dreamweaver5.html</url>
<title>Copying and pasting Fireworks HTML</title> Copying and pasting Fireworks HTML Another fast way to place Fireworks images into another HTML document is by copying and pasting from Fireworks directly into another HTML editor, such as Dreamweaver or Adobe GoLive. To copy and paste Fireworks HTML into another HTML editor: 1 Choose Edit > Copy HTML Code. 2 Follow the wizard as it guides you through the settings for exporting your HTML and images. The wizard follows a process that results in exporting the images to a folder. The HTML is copied to the Clipboard. 3 In your HTML editor, place the cursor in the location where you want to paste the HTML code. 4 Choose Edit > Paste, or the equivalent command. The HTML from Fireworks is pasted into the HTML file. When copying into Dreamweaver 3 or GoLive. All HTML and JavaScript associated with the Fireworks files you exported is copied into the HTML file, and all the links to the images are updated.
<url>html/20Dreamweaver6.html</url>
<title>Export and paste</title> Export and paste A similar method of copying Fireworks images and HTML into an HTML document is to export the images to a folder in the local copy of your Web site, then paste the HTML and JavaScript directly into an HTML editor. To export and paste Fireworks images and HTML into an HTML editor: 1 In Fireworks, choose File > Export. 2 In the Export dialog box, choose a destination for the images. Ideally, export the images to where they will reside in your final site. 3 Choose Clipboard from the HTML destination pop-up menu. 4 In the HTML editor, open the page where you want to place the Fireworks images. 5 Click where you want the content to appear, and then choose Edit > Paste. The HTML from Fireworks is pasted into the HTML file. When copying into Macromedia Dreamweaver 3 or Adobe GoLive, all HTML and JavaScript associated with the Fireworks files you exported is copied into the HTML file, and all the links to the images are updated.
<url>html/20Dreamweaver7.html</url>
<title>Exporting Fireworks HTML as a file</title> Exporting Fireworks HTML as a file If you are not immediately placing your Fireworks HTML into an HTML editor, you can export Fireworks HTML as a file. Later, you can cut and paste the HTML code from that file into another HTML file. Exporting as a file is especially useful if another person is editing the HTML on another computer or if you plan to edit the HTML later.
<url>html/20Dreamweaver8.html</url>
<title>Exporting an HTML file</title> Exporting an HTML file When you export images, you can tell Fireworks to export an HTML file in one of several different formats: None generates no HTML during export. Dreamweaver 2 generates HTML that is editable in Dreamweaver 2. Behaviors applied to objects appear in the Dreamweaver Behaviors inspector. Fireworks 3 behaviors that were not present in Dreamweaver 2 will appear as custom behaviors in the Dreamweaver 2 Behaviors inspector. Dreamweaver 3 generates HTML that is easy to edit in Dreamweaver 3. Behaviors applied to Web objects appear in the Dreamweaver Behaviors inspector. You can edit rollovers and other JavaScript behaviors in Dreamweaver's Behaviors inspector. Dreamweaver 3 Library.lbi creates special objects called library items within Dreamweaver. Use library items in Dreamweaver for images that appear on many pages in your site or for images that must be updated frequently. Library files must have an LBI extension and must be located in a folder named Library at the site root. FrontPage generates HTML that is easy to edit in Microsoft FrontPage. Generic generates HTML that adheres to basic HTML standards, but favors no particular HTML editor. GoLive generates HTML that is easy to edit in Adobe GoLive. Behaviors applied to Web objects appear in the GoLive Actions inspector. To export HTML with a file: 1 Choose File > Export. 2 Choose an HTML output style from the HTML Settings Style pop-up menu. 3 Specify a location for the exported HTML file.
<url>html/20Dreamweaver9.html</url>
<title>Using Dreamweaver 3 library items</title> Using Dreamweaver 3 library items Dreamweaver library items simplify the process of editing and updating a frequently used Web site component, such as a series of footer links or a navigation bar. A library item is a portion of an HTML file located in a folder named Library at your site root. Library items appear in the Dreamweaver Library palette. You can then drag a copy to any page in your Web site. You cannot edit a library item directly in the Dreamweaver document; you can only edit the master library item. Then, you can have Dreamweaver update every copy of that item as it is placed throughout your Web site. For more information about using Dreamweaver 3 library items, see Using Dreamweaver . To export a library item: 1 Choose File > Export. 2 Choose Dreamweaver 3 Library.lbi from the Style pop-up menu. 3 Save the file with an LBI extension into a folder named Library located at the site root. If necessary, Fireworks prompts you to create this folder. 4 Click Export and save your files.
<url>html/21Shortcuts1.html</url>
<title>File menu</title> File menu Command Windows Macintosh New Control+N Command+N Open Control+O Command+O Open Multiple Control+Shift+O Command+Shift+O Close Control+W, Control + F4 Command+W Save Control+S Command+S Save As Control+Shift+S Command+Shift+S Import Control+R Command+R Export Control+Shift+R Command+Shift+R Export Preview Control + Shift + X Command+Shift+X Preview in Primary Browser F12 F12 Preview in Secondary Browser Shift + F12 Shift + F12 Print Control+P Command+P Exit/Quit Alt+F4 Command+Q
<url>html/21Shortcuts10.html</url>
<title>Text Editor</title> Text Editor Function Windows Macintosh Increase kerning or range kerning Control + Right Arrow Command + Right Arrow Decrease kerning or range kerning Control + Left Arrow Command + Left Arrow Increase leading Control + Up Arrow Command + Up Arrow Decrease leading Control + Down Arrow Command + Down Arrow
<url>html/21Shortcuts11.html</url>
<title>Toolbox</title> Toolbox To switch to this tool Press Pointer v or 0 (zero) Select Behind v or 0 (zero) Crop c Export Area j Subselect a or 1 Marquee m Ellipse Marquee m Lasso l Polygon Lasso l Magic Wand w Hand Spacebar or h Magnify z Line n Pen p Rectangle r Ellipse r Polygon g Text t Pencil y Brush b Redraw Path b Scale q Skew q Distort q Freeform f Reshape Area f Path Scrubber (+) u Path Scrubber (-) u Eyedropper i Paint Bucket k Eraser e Rubber Stamp s
<url>html/21Shortcuts12.html</url>
<title>Miscellaneous</title> Miscellaneous Function Windows Macintosh Reset stroke and fill colors to defaults d d Swap stroke and fill colors x x Next frame Control + Page Down Command + Page Down Previous frame Control + Page Up Command + Page Up
<url>html/21Shortcuts2.html</url>
<title>Edit menu</title> Edit menu Command Windows Macintosh Undo Control+Z Command+Z Redo or Repeat Control+ Shift + Z Command + Shift + Z Cut Control+X Command+X Copy Control+C Command+C Paste Control+V Command+V Paste Inside Control+Shift+V Command+Shift+V Paste Attributes Control + Alt + Shift + V Command+Shift+Option+V Select All Control+A Command+A Deselect Control+D Command+D Superselect Control + Up Arrow Command + Up Arrow Subselect Control + Down Arrow Command + Down Arrow Select Inverse Control + Shift + I Command + Shift + I Duplicate Control + Alt + D Command Option + D Clone Control +Shift + C Command + Shift + C Crop Selected Image Control + Alt + C Command + Option + V
<url>html/21Shortcuts3.html</url>
<title>View menu</title> Command Windows Macintosh Zoom In Control + + (plus), or Control + Spacebar + drag Command + + (plus), or Command + Spacebar + drag Zoom Out Control + - (minus) Command + - (minus) Fit Selection Control + 0 (zero) Command + 0 (zero) Fit All Control+ Alt + 0 (zero) Command + Option + 0 (zero) Full Display Control + K Command + K Hide Selection Control + M Command + M Show All Control + Shift + M Command + Shift + M Hide Edges Control + H Command + H Hide Panels Control + Shift + H, or Tab Command + Shift + H, or Tab Rulers Control + Alt + R Command + Option + R Grid Control + ' (apostrophe) Command + ' (apostrophe) Guides Control + ; (semicolon) Command + ; (semicolon) Slice Guides Control + Alt + Shift + ; Command+ Shift + Option + ; View menu Magnification To set view to Windows Macintosh 50% Control + 5 Command + 5 100% Control + 1 Command + 1 200% Control + 2 Command + 2 400% Control + 4 Command + 4 800% Control + 8 Command + 8 3200% Control + 3 Command + 3 6400% Control + 6 Command + 6 submenu Grid Command Windows Macintosh Snap to Grid Control + Shift + ' (apostrophe) Command + Shift + ' (apostrophe) Edit Grid Control + Alt + G Command + Option + G Options submenu Guide Options Command Windows Macintosh Lock Guides Control + Alt + ; Command + Option + ; Snap to Guides Control + Shift + ; Command + Shift + ; Edit Guides Control + Alt + Shift + G Command+Option+Shift+G submenu
<url>html/21Shortcuts4.html</url>
<title>Insert menu</title> Insert menu Command Windows Macintosh New Symbol Control + F8 Command + F8 Convert to Symbol F8 F8 Hotspot Control + Shift + U Command + Shift + U Image Control + R Command + R Empty Image Control + Alt + Y Command + Option + Y
<url>html/21Shortcuts5.html</url>
<title>Modify menu</title> Modify menu Command Windows Macintosh Tween Instances Control + Alt + Shift + T Command+Option+Shift+T Image Object Control + E Command + E Exit Image Edit Control + Shift + D Command + Shift + D Join Control + J Command + J Split Control + Shift + J Command + Shift + J Merge Images Control + Shift + Alt + Z Command+Shift+Option+Z Group Control + G Command + G Mask to Image Control + Shift + G Command + Shift + G Ungroup Control + U Command + U Transform submenu Command Windows Macintosh Free Transform Control + T Command + T Numeric Transform Control + Shift + T Command + Shift + T Rotate 90 degrees CW Control + 9 Command + 9 Rotate 90 degrees CCW Control + 7 Command + 7 Arrange submenu Command Windows Macintosh Bring to Front Control + F Command + F Bring Forward Control + Shift + F Command + Shift + F Send Backward Control + Shift + B Command + Shift + B Send to Back Control + B Command + B Align submenu Command Windows Macintosh Left Control + Alt +1 Command + Option +1 Center Vertical Control + Alt +2 Command + Option +2 Right Control + Alt +3 Command + Option +3 Top Control + Alt +4 Command + Option +4 Center Horizontal Control + Alt +5 Command + Option +5 Bottom Control + Alt +6 Command + Option +6 Distribute Widths Control + Alt +7 Command + Option +7 Distribute Heights Control + Alt +9 Command + Option +9
<url>html/21Shortcuts6.html</url>
<title>Text menu</title> Text menu Command Windows Macintosh Editor Control + Shift + E Command + Shift + E Attach to Path Control + Shift + Y Command + Shift + Y Convert to Paths Control + Shift + P Command + Shift + P Style submenu Command Windows Macintosh Plain Control+Alt+Shift+P, or F5 Command+Option+Shift+P, or F5 Bold Control+Alt+Shift+B, or F6 Command+Option+Shift+B, or F6 Italic Control+Alt+Shift+I, or F7 Command+Option+Shift+I, or F7 Underline Control+Alt+Shift+U, or F8 Command+Option+Shift+U, or F8 Align submenu Command Windows Macintosh Left Control+Alt+Shift+L Command+Option+Shift+L Center Control+Alt+Shift+C Command+Option+Shift+C Right Control+Alt+Shift+R Command+Option+Shift+R Justified Control+Alt+Shift+J Command+Option+Shift+J Stretched Control+Alt+Shift+S Command+Option+Shift+S
<url>html/21Shortcuts7.html</url>
<title>Window menu</title> Window menu Command Windows Macintosh New Window Control+Alt+N Command + Option + N Toolbox Control + Alt + T Command + Option + T Object inspector Control + I Command + I Stroke panel Control + Alt + B Command + Option + B Fill panel Control + Alt + F Command + Option + F Effect panel Control + Alt + E Command + Option + E Swatches panel Control + Alt + S Command + Option + S Color Mixer Control + Alt + M Command + Option + M Tool Options panel Control + Alt + O Command + Option + O Layers panel Control + Alt + L Command + Option + L Frames panel Control + Alt + K Command + Option + K Info panel Control + Alt + I Command + Option + I Behaviors inspector Control + Alt + H Command + Option + H URL panel Control + Alt + U Command + Option + U Styles panel Control + Alt + J Command + Option + J
<url>html/21Shortcuts8.html</url>
<title>Xtras menu</title> Xtras menu Command Windows Macintosh Repeat Xtra Control+Alt+Shift+X Command+Option+Shift+X
<url>html/21Shortcuts9.html</url>
<title>Help menu</title> Help menu Command Windows Macintosh Using Fireworks F1 Help
<url>html/90cred1.html</url>
<title></title> Acknowledgments Project Management: Sheila McGinn Writing: Kim Diezel, Jed Hartman, Lori Hylan, Marcelle Taylor Multimedia Design: John "Zippy" Lehnus Multimedia Production: John "Zippy" Lehnus and Noah Zilberberg Help Engineering: Lori Hylan Java Engineering: Eric Harshbarger Editorial and Production Management: Peter Fenczik Editing: Anne Szabla and Rosana Francescato Print and Help Design: Noah Zilberberg Print and Help Production: Chris Basmajian Special thanks to Jaime Austin, Heidi Bauer, Kristin Conradi, Margaret Dumas, Mark Erickson, Jean Fitzgerald, Stephanie Goss, Zena Harvill, Noah Hoffman, nj, Missy Keadle, Paul Madar, Ben Melnick, Charles Nadeau, Ken Sundermeyer, Mike Sundermeyer, and Vernon Viehe, and the Dreamweaver engineering and QA teams.
<title>Index</title> B {font-weight: 700; font-size: 12pt; color: black; } P {padding: 5px 0px; margin: 0px; font-size: 10pt; font-family: Arial, Helvetica, sans-serif; } A {text-decoration: none} TD {font-size: 10pt; font-family: Arial, Helvetica, sans-serif; } A absolute URLs activating image edit mode object mode adaptive palette Add to Transparency tool adding buttons commands effects fills frames hotspots images instances layers objects palettes paths rollovers Scriptlets scripts slice objects strokes styles symbols text texture alpha mask alpha opacity alternate text animation adding frames controlling copying frames creating creating from multiple files custom frame viewing deleting frames disabling layer sharing editing GIFs exporting exporting as Flash file exporting as multiple files frame delay importing importing objects inserting frames looping managing frames moving objects to another frame multi-frame editing objects as cast members onion skinning opening optimizing organizing with layers overview planning an animation planning frames playing previewing reordering frames setting frame delay sharing layers across frames speed transparency turning frames on and off turning off onion skinning using symbols and instances viewing all frames viewing before and after frames viewing multiple frames viewing next frame anti-aliasing objects text Apple Color Picker AppleScript, see scripts arranging frames layers objects on a layer Attach to Path command Auto Levels Xtra auto-kerning auto-naming slice objects B background color backing up during batch processing during Find and Replace Base Name baseline shift Batch Export dialog box batch processing backing up original files changing file settings creating Scriptlets dragging and dropping Scriptlets export settings file formats Find and Replace attributes Find and Replace during graphics naming options running Scriptlets scaling options Behaviors inspector assigning behaviors overview beveled edges Bézier curves bit depth bitmap images black and white palette blending mode base color behavior behavior in image edit mode blend color Color Darken defined Difference Erase examples Hue Invert Lighten Luminosity Multiply Normal opacity result color Saturation Screen setting default Tint blending objects Blur More Xtra Blur Xtra blurring bold text Border command brightness Brightness/Contrast Xtra browser detection in rollovers browser-safe palette Brush tool brushes editing saving setting tip stroke options Button Editor buttons active area adding Down state adding Over While Down state attaching URLs bevel effects Button Editor converting from Fireworks 2 format creating creating advanced rollovers defined Down state editing editing active area editing text exporting features inserting from libraries Link Wizard making rounded corners navigation bars Over state Over While Down state overview simple rollover Up state C cache files cameras, digital canvas rotating setting color setting size trimming centerpoint, drawing from Circle Hotspot tool circles, drawing clipping path cloning images using Rubber Stamp tool closed paths closing, document view CMY color model color adding from screen to a palette adding to transparency appending a palette applying from Swatches panel background blending mode blending objects into background changing default changing fill changing stroke choosing custom palette choosing working palette clearing Swatches panel color models creating creating in Color Mixer deleting from Swatches panel dithering with Websafe fill finding and replacing finding and replacing non-Websafe Gradient fill Info panel information inverting values obtaining using Eyedropper tool optimizing color palettes overview picking from color bar pop-up color well replacing a swatch resetting default sampling saving custom palette saving custom palettes selecting for transparency setting depth setting opacity setting preferences Solid fill sorting Swatches panel stroke swapping stroke and fill text using Color Mixer color bar choosing a color choosing a color model color depth, setting Color Mixer creating colors color models choosing in the color bar CMY Grayscale Hexadecimal HSB Info panel RGB color palettes adaptive adding from screen to appending to current palette black and white browser-safe choosing choosing custom choosing working clearing color models creating colors custom deleting color editing colors exact grayscale locking colors optimizing replacing color saving custom saving custom swatches setting number of colors setting transparency during export sorting System uniform Web 216 Web Adaptive Websafe colors Color Table editing colors locking colors previewing pixels removing edits selecting a color selecting a range selecting multiple colors unlocking a color unlocking all colors updating viewing color well Apple Color Picker fill pop-up stroke System color picker commands Commands menu redoing repeating saving undoing Commands menu adding commands adding Scriptlets compositing configuring Fireworks constraining Alt key (Windows) Option key (Macintosh) rotation Shift key Shift-Alt keys (Windows) Shift-Option keys (Macintosh) while drawing from centerpoint while drawing lines while drawing polygons while drawing stars Contract command contrast Convert to Alpha Xtra converting CorelDRAW files files FreeHand files Illustrator files objects to images Photoshop files copying and pasting Fireworks HTML HTML resampling graphics to import graphics copying, pixels CorelDRAW files converting importing corner point correcting mistakes, see Undo creating animations batch Scriptlets buttons color in Color Mixer colors custom effects hotspots image maps image masks images instances layers new documents path masks rollovers scripts slice objects symbols thumbnails Crop command Crop tool cropping curve point Curves Xtra D deleting color from Swatches panel effects layers styles symbols Deselect command deselecting an object everything Detach from Path command digital camera images direct selection tool, see Subselection tool disjoint rollovers disjoint swap images displaying hiding edges outline points distorting objects Distortion Transform tool dither fill dithering with Websafe colors document adding layers closing view creating default mode deleting layers display modes Draft Display mode duplicating layers exporting a portion exporting overview exporting Web pages finding and replacing Full Display mode Gamma mode importing PNG files importing using Copy and Paste importing using Drag and drop locking and unlocking layers magnification matching size of Clipboard contents moving layers moving objects to another layer multiple views naming layers navigating in opening a second view opening Fireworks 1 files opening Photoshop files optimizing redraw organizing objects overview panning resampling when importing rotating selecting active layer setting image map options setting size sharing layers across frames showing and hiding layers Single Layer Editing tiling trimming canvas using Gradient fills from another using saved strokes Web Layer zooming in zooming in based on selection zooming out zooming out based on selection zooming to 100% magnification download time, estimating Draft Display mode Drag and drop Scriptlets to import graphics drawing adding stroke texture adding texture to fills adjusting fills anti-aliasing applying Gradient fills applying Pattern fills applying Solid fills applying styles bending only one adjacent segment buttons by plotting points changing adjacent segments changing default colors changing fill color changing fill color for basic shape tools changing stroke color changing stroke color of drawing tools circles constraining centered shapes constraining lines converting curved paths to straight converting straight paths to curved creating custom strokes cropping paths cutting paths deleting Gradient fills distorting objects dither fill editing fills editing Gradient fills editing Solid fills editing strokes ellipses expanding or contracting paths expanding strokes fill over strokes flipping objects freeform paths in object mode joining paths lines moving a point moving fills moving strokes path objects point by point polygons pulling paths pushing paths rectangles removing portions of a path renaming Gradient fills reorienting strokes resetting default colors reshaping an area reshaping paths reusing Gradient fills in another document rotating fills rotating objects rounded corners saving Gradient fills saving stroke settings scaling objects selecting a point setting brush tip setting fills for drawing tools setting reshape area size setting stroke options setting stroke sensitivity setting strokes for drawing tools simplifying paths skewing objects slicing paths splitting paths squares stars swapping stroke and fill colors transforming Gradient fills transforming numerically transforming Pattern fills transparency illusion triangles Dreamweaver editing Fireworks images in exporting library items launching from Fireworks optimizing images in Fireworks overview placing Fireworks images on Web pages using library items E edges anti-aliasing showing and hiding Edit Gradient dialog box Edit Stroke dialog box Edit Stroke Options panel Edit Stroke Sensitivity panel Edit Stroke Shape panel editing adding stroke texture adding texture to fills adjusting brightness or contrast adjusting fills adjusting hue or saturation adjusting tonal range adjusting tonal range using Curves adjusting tonal range using eyedropper anti-aliasing Auto Levels button text buttons changing default colors changing fill color changing stroke color creating custom strokes cropping paths cutting paths deleting Gradient fills deleting strokes distorting objects dither fill drawing fill over strokes effects expanding or contracting paths expanding strokes fills flipping objects Gradient fills hotspots HTML files joining paths masks moving fills moving strokes output styles overview paths Pattern fills pixels pulling paths pushing paths redrawing a segment removing portions of a path renaming Gradient fills renaming strokes reorienting strokes resetting default colors reshaping an area reshaping paths reusing Gradient fills in another document rollovers rotating fills rotating objects saving Gradient fills saving stroke settings scaling objects scripts setting brush tip setting reshape area size setting stroke options setting stroke sensitivity simplifying paths skewing objects slicing paths Solid fills strokes styles swapping stroke and fill colors symbols text transforming Gradient fills transforming numerically transforming Pattern fills transparency illusion using saved strokes in another document using Text Editor Effect panel effects applying defaults applying filters as applying multiple applying Photoshop plug-ins applying to grouped objects applying to objects beveled edges buttons and color well creating custom deleting disabling editing embossing finding and replacing glow Live modifying plug-ins reactivating removing removing all renaming reordering saving saving as styles setting defaults setting sequence shadow speeding up redraw text Xtras Ellipse Marquee tool Ellipse tool ellipses, drawing embossing Empty Image command entering text Eraser tool erasing, pixels exact palette Expand command Expand Stroke command Export Area tool Export dialog box Export Preview dialog box comparing different optimizations exporting to a specific file size exporting using optimizing using panning view zooming view Export Wizard exporting adaptive palette animated GIFs animations as multiple files areas Base Name black and white palette buttons custom palettes Dreamweaver library item editing colors in palette exact palette Export Area tool Export Preview Options panel Export Wizard Fireworks HTML for Flash for FreeHand for Illustrator frames as individual files GIF images grayscale palette HTML file formats image maps images JPEG images layers as individual files locking colors in palette optimizing for Web optimizing using Export Preview overview paths PNG images portions of documents results rollovers saving custom palettes selected paths selected slices setting color depth on export setting number of colors shim file sliced objects slicing options styles System palette to a specific file size transparency Eyedropper tools uniform palette using Export Preview using Matte color using nested tables using shims Web 216 palette Web Adaptive palette Web pages Websafe colors Eyedropper tool F Feather command feathering file conversion files backing up during batch processing batch processing changing settings with batch processing importing PNG interlacing selecting graphic format Fill panel fills adding external patterns to list adding external textures to list adding texture adjusting anti-aliasing applying Gradient applying Pattern applying Solid changing color changing color for basic shape tools changing default color color well deleting Gradient dither fill drawing over strokes editing editing Gradient editing Solid finding and replacing moving renaming Gradient resetting default color reusing Gradient in another document rotating saving Gradient setting for drawing tools swapping stroke and fill colors text transforming Gradient transforming Pattern transparency illusion filters applying as effects Find and Replace colors documents during batch processing fonts managing with Project Log multiple files non-Websafe colors selecting source for search text URLs uses Find and Replace panel Find Edges Xtra Fireworks configuring converting Fireworks 2 buttons copying and pasting Fireworks HTML dragging and dropping editing images in Dreamweaver export file formats exporting and pasting Fireworks HTML exporting Dreamweaver library items exporting Fireworks HTML feature tour inserting Fireworks HTML in another file installing launching Dreamweaver multimedia tour new features newsgroup pasting HTML placing images on Web pages planning Web sites resampling methods resources for learning setting preferences Support Center System requirements updating Fireworks HTML in another file using Dreamweaver library items using Fireworks HTML working with Dreamweaver workspace tour Fireworks Help Flash exporting animations for exporting for flattening layers flipping objects fonts changing attributes choosing finding and replacing handling missing selecting replacement frame delay (animations) frames adding animation overview animation speed Base Name copying custom viewing delay deleting disabling layer sharing inserting managing matching with rollover states moving objects to another frame multi-frame editing onion skinning planning use in animation reordering setting delay sharing layers sharing layers for animation Single Layer Editing turning off onion skinning turning on and off viewing all viewing before and after viewing next Frames panel Freeform tool FreeHand files converting importing FreeHand, exporting for Full Display mode G Gamma mode Gaussian Blur Xtra GIF choosing a color palette defined dithering exporting interlacing optimizing optimizing color palettes selecting a color palette setting color depth setting loss glow effects Gradient editor Gradient fills adding new color adjusting adjusting color transition applying changing colors deleting saved Edit Gradient dialog box editing moving removing colors renaming reusing in another document rotating saving transforming graphics backing up during batch processing batch processing bitmap changing settings with batch processing comparing different optimizations creating hotspots creating image maps creating slice objects creating thumbnails custom optimization settings deleting optimization settings editing hotspots editing in Dreamweaver estimating download time exporting filling selection filters GIF importing JPEG leaving edit mode optimizing controls optimizing for Web optimizing slices optimizing using Fireworks in Dreamweaver PNG previewing optimization previewing rollovers resizing saving optimizations settings slicing vector Xtras Grayscale color model grayscale palette group mask, see mask group grouping objects guides, slice H halos, removing Hand tool handles displaying editing transform Hexadecimal color model Hide Panels command hiding edges inspectors layers panels selected objects toolbars histogram History panel creating commands overview Redoing steps repeating commands saving commands Undoing steps hotspots absolute URLs assigning URLs assigning URLs from libraries background URL circular compared to slice objects converting to basic shapes creating creating by tracing editing editing using points links odd-shaped overview polygonal rectangular relative URLs showing and hiding skewing transforming viewing HSB color model HTML adding alerts to output code adding output styles basics choosing image map source graphics common tags copying and pasting Fireworks HTML copying HTML for image maps copying HTML for sliced objects copying JavaScript creating hotspots customizing rollover output editing output styles export file formats exporting and pasting Fireworks HTML exporting Fireworks HTML exporting image maps inserting Fireworks HTML in another file overview pasting HTML planning Web sites removing output styles updating Fireworks HTML in another file using Dreamweaver library items using Fireworks HTML working with Dreamweaver hue Hue/Saturation Xtra I Illustrator files converting importing Illustrator, exporting for image edit mode activating blending mode behavior blending mode behavior overview defined hiding striped border leaving pasting settings using drawing and editing tools image maps choosing source graphic copying HTML for exporting overview setting options Image Size dialog box images adjusting brightness adjusting contrast adjusting hue adjusting saturation adjusting tonal range adjusting tonal range using Curves adjusting tonal range using eyedropper alpha mask Auto Levels backing up during batch processing batch processing bitmap blurring changing settings with batch processing checking tonal range cloning comparing different optimizations converting from objects converting image mask to path mask converting mask group to normal group converting normal group to mask group converting path mask to image mask converting to grayscale creating creating hotspots creating image maps creating image masks creating path masks creating slice objects creating thumbnails cropping custom optimization settings cutting deleting optimization settings editing hotspots editing in Dreamweaver erasing pixels exporting feathering filling selection filters find edges GIF hiding bounding box histogram importing inverting color values JPEG leaving edit mode masking opening animated GIFs optimizing controls optimizing for Web optimizing slices optimizing using Fireworks in Dreamweaver painting PhotoShop plug-ins placing on Web pages PNG preset optimizations previewing optimization resizing resolution saving optimization settings scaling during batch processing selecting selecting in object mode selecting pixels sharpening slicing striped border Unsharp Mask Xtras importing animated GIFs ASCII files CorelDRAW files digital camera images file conversion Fireworks 1 files FreeHand files Illustrator files images overview pasting in image mode pasting in object mode Photoshop Acquire plug-ins (Macintosh) Photoshop files Photoshop text PNG files resampling during Copy and Paste RTF files scanner images styles text using Copy and Paste using Drag and drop Index Transparency Info panel Inset Path command inspectors Behaviors Behaviors, assigning behaviors choosing options combining entering information removing from tabbed reorganizing showing and hiding using using pop-ups installing, Photoshop plug-ins installing Fireworks instances animation creating defined modifying placing in document tweening interlacing interpolation (scaling) Intersect command Invert Xtra italic text J JavaScript adding alerts to output code copying output styles see also scripts Join command joining paths JPEG defined exporting optimizing progressive reducing quality sharpening color edges smoothing justifying text K kerning Knife Eraser tool Knife tool L Lasso tool layer mask layers adding animation Base Name creating defined deleting deselecting everything on disabling sharing across frames duplicating inserting locking and unlocking masking moving moving objects to naming selecting active selecting everything on sharing across frames sharing across frames for animation showing and hiding Single Layer Editing Web Layer working with Layers panel leading learning Fireworks feature tour newsgroup resources for Support Center workspace tour Levels Xtra Library panel Line tool lines constraining while drawing drawing Link Wizard link, see URLs Live Effects, see effects M Macintosh Apple Color Picker System requirements for Magic Wand tool magnification Magnify tool Marquee tool marquees contracting deselecting expanding removing selecting area around smoothing mask mask group converting to normal group creating defined subselecting Mask to Image command Mask to Path command masking converting image mask to path mask converting mask group to normal group converting normal group to mask group converting path mask to image mask creating a path mask creating an image mask defined editing Matte color Merge Images command mode activating image edit mode entering object modifying instances paths symbols Mouse Highlight command moving brush strokes in document layers multimedia tour multiple document views N naming slice objects navigating in document navigation bars, creating New Document dialog box Numeric Transform command O object mode activating blending mode behavior blending mode behavior overview drawing entering pasting pushing and pulling paths redrawing paths returning to selecting images in switching to using drawing and editing tools objects adding stroke texture adding texture to fills adjusting fills alpha mask animating anti-aliasing applying effect default settings applying effects applying effects to groups applying filters as effects applying Gradient fills applying Live Effects applying multiple effects applying Pattern fills applying Photoshop plug-ins applying Solid fills applying styles arranging on layers beveled edges blending blending into background colors blurring changing default colors changing fill color changing stroke color converting to grayscale converting to images converting to symbols creating custom effects creating custom strokes creating symbols cropping paths cutting deleting effects deleting Gradient fills deselecting deselecting everything disabling effects displaying outline displaying points distorting dither fill drawing fill over strokes drawing path objects editing effects editing fills editing Gradient fills editing Solid fills editing strokes embossing expanding or contracting paths expanding strokes exporting exporting paths exporting selected paths find edges flipping glow effects grouping inverting color values joining paths masking modifying symbols moving fills moving strokes moving to another layer organizing overview reactivating effects redrawing a segment removing all effects removing an effect removing halos removing portions of a path renaming effects renaming Gradient fills reordering effects reorienting strokes resetting default colors reshaping an area reshaping paths reusing Gradient fills in another document rotating rotating fills saving effects saving effects as styles saving Gradient fills scaling selecting selecting additional objects selecting everything on every layer selecting grouped selecting multiple selecting objects behind another selection highlighting option setting brush tip setting default effect settings setting opacity setting stroke options setting stroke sensitivity shadow effects showing all hidden objects showing and hiding showing and hiding edges simplifying paths skewing slicing splitting paths swapping stroke and fill colors transforming transforming by dragging transforming numerically transforming Pattern fills transparency illusion tweening ungrouping Web Layer onion skinning Button Editor custom viewing defined multi-frame editing turning off viewing all frames viewing before and after frames viewing next frame opacity defined setting open paths opening animated GIFs Fireworks 1 files multiple documents multiple files as animations Photoshop files Optimize panel Optimize to Size Wizard optimizing animations choosing a color palette color palettes comparing different settings controls custom settings deleting settings dithering for Web GIF images interlacing JPEG images PNG images previewing progressive reducing quality removing unused colors saving settings selecting a color palette selecting file format setting color depth setting loss setting number of colors sharing settings sharpening color edges slice objects smoothing using Export Wizard using presets using scripts viewing Color Table viewing colors in a palette output styles adding editing removing P Paint Bucket tool palettes adaptive adding from screen to appending to current palette black and white choosing choosing custom choosing working clearing color models creating colors custom deleting color editing colors exact exporting grayscale locking colors optimizing replacing color saving saving custom saving custom swatches setting number of colors setting transparency during export sorting System uniform Web 216 Web Adaptive Websafe colors panels Behaviors choosing options Color Table combining Edit Stroke Options Edit Stroke Sensitivity Edit Stroke Shape Effect entering information Fill Find and Replace Frames hiding History Layers Library Optimize Project Log removing from tabbed reorganizing showing and hiding showing hidden Stroke Styles Swatches Tool Options URL using using pop-ups viewing hidden panning paste inside pasting formats in image edit mode in object mode Path Scrubber tool paths adding points adding stroke texture attaching text bending one adjacent segment changing adjacent segment changing default colors changing stroke color converting curved to straight converting straight to curved converting text to corner point creating custom strokes cropping curve point cutting deleting portions displaying outline displaying points drawing editing editing attached text editing strokes editing when attached to text editing without point handles expanding or contracting expanding stroke exporting exporting for Flash exporting for FreeHand exporting for Illustrator exporting selected joining modifying moving a point moving strokes moving text starting point open and closed overview placing text on point handles pulling pushing pushing and pulling redrawing redrawing a segment removing portions renaming strokes reorienting strokes resetting default colors reshaping reshaping an area reshaping text as selecting a point selecting behind setting brush tip setting reshape area size setting stroke options setting stroke sensitivity simplifying splitting swapping stroke and fill colors using saved strokes in another document Pattern fills adding external to list adjusting applying moving rotating transforming Pen tool Pencil tool perspective illusion Photoshop import options importing files or objects importing text from Photoshop Acquire plug-ins, (Macintosh) Photoshop plug-ins applying installing pixels adjusting a selection adjusting tonal range adjusting tonal range using Curves adjusting tonal range using eyedropper Auto Levels changing color cloning contracting selection border copying cutting defined editing editing multiple editing one at a time erasing expanding selection border feathering filling image edit mode moving overview painting selecting selecting area around marquee selecting elliptical area selecting freeform area selecting polygonal area selecting rectangular area selecting similar colors smoothing marquee border tonal range playing animations plug-ins PNG choosing a color palette defined dithering exporting importing interlacing optimizing optimizing color palettes selecting a color palette setting color depth point size Pointer tool points bending one adjacent segment changing adjacent segment converting curved to straight converting straight to curved corner curve drawing using handles moving selecting Polygon Hotspot tool Polygon Lasso tool Polygon Slice tool Polygon tool polygons constraining while drawing drawing number of sides pop-up color well preferences cache files color defaults editing options folder options import options interpolation options setting Undo steps preset optimizations printing, Project Log progressive JPEG images Project Log adding files manually exporting files listing files logging Find and Replace changes managing searches opening files printing removing all entries removing an entry viewing pulling an area paths Punch command pushing an area paths R RAM, see System requirements Rectangle Hotspot tool Rectangle tool rounded corners rectangles drawing rounded corners Redo Redraw Path tool redrawing paths relative URLs removing effects halos Rename Stroke dialog box renaming effects Gradient fills strokes replacing replaying animations resampling during Copy and Paste Reshape Area tool reshaping paths resizing images resources for learning Fireworks RGB color model Rich Text Format (RTF) rollovers active area Adding Down state adding Over While Down state adding to slices assigning mouse events assigning URL links attaching URLs bevel effects browser compatibility browser detection converting from Fireworks 2 format creating creating advanced customizing HTML output defined defining area that activates disjoint Down state editing editing active area exporting external source files inserting from libraries irregularly shaped list of behaviors matching states with frames navigation bars onClick onMouseOut onMouseOver Over state Over While Down state overlapping overview of advanced preloading images previewing setting behavior setting pointer event setting status bar text setting swap area setting swap image behavior setting trigger specifying disjoint swap images steps to create Up state rotating canvas constraining objects relocating axis of rotation rounded corners Rubber Stamp tool cloning running Scriptlets scripts S saturation Save Stroke dialog box saving brushes commands custom color palettes effects Gradient fills optimization settings stroke settings Scale Transform tool scaling images during batch processing interpolation options scaling objects Scan command scanner images Scriptlets Commands menu creating dragging and dropping running scripts clearing all steps creating commands creating macro editing as JavaScript file format naming commands overview playing commands playing steps running setting number of steps undoing actions searching Select Behind tool selecting additional objects adjusting a selection marquee area around marquee contracting marquee border deselecting an object deselecting an object in a group deselecting everything deselecting marquee displaying outline displaying points elliptical area of pixels everything on every layer expanding marquee border feathering edges filling selection freeform area of pixels group containing selected object grouped objects hiding bounding box highlighting option images images in object mode multiple objects object within a group objects objects behind another object objects within a mask group paths behind another path pixels points polygonal area of pixels rectangular area of pixels similar colors smoothing marquee border subselecting Set Transparency tool shadow effects Sharpen More Xtra Sharpen Xtra sharpening shims exporting file shortcut menu showing edges inspectors layers panels selected objects toolbars Simplify command Single Layer Editing Skew Transform tool skewing objects slanting objects slice guides setting color showing and hiding slice objects adding interactivity adding rollovers advantages alternate text assigning URLs auto-naming compared to hotspots copying HTML for creating creating text slices custom naming export options exporting exporting selected exporting using nested tables exporting using shims formatting text slices hiding in Preview mixing file formats naming nested tables optimization settings overview polygon rectangular replacing setting default auto-naming shims showing and hiding showing in Preview simple slice guides updating Slice tool slicing slicing a path Smooth command Solid fills adding texture applying Split command squares drawing rounded corners stacking order stars angle constraining while drawing drawing number of points status bar text striped border Stroke panel strokes adding external textures to list adding texture brush stroke preview categories changing centering changing color changing color of drawing tools changing default color choosing a stroke color well creating custom deleting drawing fill over edge editing finding and replacing moving names renaming reorienting resetting default color saving settings setting for drawing tools setting sensitivity swapping stroke and fill colors text texture using in another document styles adding applying basing on existing styles defined deleting editing enlarging preview icons exporting importing new resetting to defaults saving effects as selecting small previews text using Styles panel Subselection tool Swatches panel appending a palette clearing deleting a color replacing a color saving custom sorting symbols animation converting objects to creating creating instances defined deleting duplicating editing modifying modifying instances placing instances in document tweening System color picker color wells System palette System requirements T tags (HTML) templates adding output styles HTML output styles removing output styles text adding alignment anti-aliasing applying effects applying fills applying strokes applying styles attaching to paths auto-kerning auto-sizing baseline shift block alignment bold bold italic center changing attributes changing font changing font style changing type size changing using Text menu color converting to paths detaching from paths direction of flow editing editing path attached to editing when attached to path entering finding and replacing flow handling missing fonts importing importing ASCII importing from Photoshop importing RTF italic justifying kerning leading left align moving moving starting point on path orientation overview placing on paths point size reshaping as paths right align smoothing edges Text Editor transforming underlining viewing default size viewing in system font Text Editor Text tool texture adding to fills adding to strokes thumbnail images Tool Options panel toolbars docking rearranging showing and hiding unlocking Toolbox choosing tools contents displaying tools Add to Transparency Brush changing fill color changing options changing stroke color choosing choosing alternate tools Circle Hotspot Crop displaying Distortion Transform Ellipse Ellipse Marquee Eraser Export Area Eyedropper Freeform Hand in Toolbox Knife Knife Eraser Lasso Line Magic Wand Magnify Marquee Paint Bucket Path Scrubber Pen Pencil Pointer Polygon Polygon Hotspot Polygon Lasso Polygon Slice rearranging toolbars Rectangle Rectangle Hotspot Redraw Path Reshape Area Rubber Stamp Scale Transform Select Behind Set Transparency Skew Transform Slice Subselection Text Toolbox Transform ToolTips Transform tools Distortion Transform tool Scale Transform tool Skew Transform tool transforming by dragging numerically objects text transparency adding colors animation compositing Eyedropper tools index selecting color setting during export transparency illusion triangles constraining while drawing drawing Trim Canvas command Twain importing Tween Instances command tweening characteristics defined objects U underlining Undo commands setting number ungrouping objects uniform palette Union command Unsharp Mask Xtra URL panel URLs absolute adding to libraries assigning from libraries assigning to hotspots assigning to rollovers assigning to slice objects attaching to buttons background creating new libraries finding and replacing managing relative V vector drawing viewing different optimization settings hidden panels hotspots inspectors sliced objects Web Layer views, multiple W Web 216 palette Web Adaptive palette Web Layer location in document showing and hiding viewing hotspots viewing sliced objects Web objects auto-naming slice objects exporting image maps location in document naming slice objects organizing by color Web pages adding rollovers to slices blending objects into background creating hotspots creating slice objects exporting image maps setting image map options slicing images Web sites common HTML tags HTML basics planning Websafe palette Wizards Export Link Optimize to Size X Xtras as Live Effects Auto Levels Blur Blur More Brightness/Contrast Convert to Alpha Curves Find Edges Gaussian Blur Hue/Saturation Invert Levels Sharpen Sharpen More Unsharp Mask Z zooming in in based on selection out out based on selection to 100% magnification
<url>html/FW3UMTOC.fm.html</url>
<title>Help Contents</title> Introduction Overview: Introduction to Fireworks System requirements Installing Fireworks Learning Fireworks What's new in Fireworks 3 Tutorial Tutorial overview Drawing tools JavaScript buttons Sophisticated rollovers Live Effects Automation Masks Hotspots Image optimization Export images, HTML, and JavaScript Animation Fireworks Basics Overview: Fireworks basics What is Fireworks? Enhancing your Web site with Fireworks Introducing the Fireworks workspace Displaying a Fireworks document Optimizing in the workspace Displaying and choosing tools Rearranging toolbars (Windows only) Changing tool options Using panels and inspectors Attaching behaviors to Web objects Changing and repeating a document's history Building JavaScript rollover buttons Using context menus Setting preferences Setting editing preferences Managing external folders and scratch disks Setting Photoshop file import preferences Creating and Importing Documents Overview: Creating and importing documents Setting up a new document Navigating and viewing the document Multiple document views Controlling document redraw Changing document size, color, and resolution Choosing a resampling method Resampling in Fireworks Rotating and trimming the canvas Creating Fireworks documents by importing Opening Photoshop files Opening FreeHand, Illustrator, or CorelDRAW files Opening animated GIFs Importing from a scanner or digital camera Drawing Objects Overview: Drawing objects Entering object mode Choosing drawing and editing tools Drawing in object mode Understanding open and closed paths Drawing lines, rectangles, and ellipses Rounding rectangle corners Drawing triangles and other polygons Drawing stars Painting and drawing freeform paths Drawing freeform paths by plotting points Changing the stroke of the drawing tools Changing the fill of the drawing tools Including imported images in a document Dragging and dropping Pasting into Fireworks Resampling imported objects Importing PNG files Editing Objects Overview: Editing objects Selecting objects Highlighting selectable objects Displaying paths and points when selecting path objects Selecting images in object mode Reshaping paths by editing points Reshaping paths directly Bending paths Distorting paths Redrawing paths Cutting paths into multiple objects Reshaping path objects using path operations Combining path objects Removing portions of a path object Cropping a path Simplifying a path Expanding a stroke Contracting or expanding a path Changing stroke and fill colors Editing strokes Adding texture to a stroke Creating custom strokes Saving stroke settings Placing the stroke on the path Editing fills Editing a Solid fill Applying a Gradient fill Editing a Gradient fill Saving and reusing Gradient fills Applying to a Pattern fill Transforming and distorting Gradient and Pattern fills Adding texture to a fill Dithering with Websafe colors Changing a fill's edge Using styles Applying and editing styles Importing and exporting styles Transforming and distorting objects Scaling objects Rotating objects Flipping objects Skewing objects Distorting objects Numeric transformations Organizing objects Arranging objects Hiding and showing objects Grouping objects Selecting grouped objects Creating and arranging layers The Web Layer Symbols and instances Creating a symbol Placing instances Modifying a symbol Releasing an instance from a symbol Exporting, importing, and updating symbols Color and Transparency Overview: Color and transparency Choosing colors as you draw Applying colors from the Swatches panel Applying colors from the color well pop-up menu Applying colors from anywhere onscreen Customizing the Swatches panel Changing swatch groups Creating colors Creating colors using system color pickers Viewing color information Assigning transparency Anti-aliasing to match the target background color Removing halos from Web graphics Using Text Overview: Using text Entering text Moving text blocks Auto-sizing text blocks Editing text Choosing a font, type size, and style Setting baseline shift and leading Setting kerning Setting direction and orientation Setting alignment Applying text color Smoothing text edges Applying strokes, fills, effects, and styles to text Attaching text to a path Transforming text Reshaping text Importing text Importing text from Photoshop Importing RTF files Importing ASCII text Handling missing fonts Editing and Painting Pixels Overview: Editing and painting pixels Understanding image edit mode Creating bitmap images Switching to image edit mode Selecting pixels Using the image edit selection tools Choosing tool options Adjusting a selection marquee Adding or removing pixels using modifier keys Expanding and contracting a marquee Selecting an area around an existing marquee Smoothing the border of a marquee Editing pixels Editing pixels with the Paint Bucket tool Cloning portions of an image Feathering image edges Erasing pixels Cropping an image Painting pixels Blending mode behavior in image edit mode Using filters and plug-ins Using filters and plug-ins as Live Effects Adjusting brightness or contrast Adjusting the hue or saturation Adjusting the tonal range with Levels Adjusting the tonal range automatically Adjusting the tonal range using Curves Adjusting the tonal range with the eyedroppers Inverting an image's color values Blurring an image Using the Convert to Alpha filter Changing color transitions to lines Sharpening an image Applying Effects to Objects Overview: Applying effects to objects Applying a Live Effect Editing Live Effects Reordering Live Effects Removing Live Effects Creating custom effects Saving an effect as a style Using the default Live Effect settings Handling Live Effect redraw Applying effects to grouped objects Using standard Live Effects Applying beveled edges Applying embossing effects Applying shadows and glows Using Photoshop plug-ins as Live Effects Using Fireworks Xtras as Live Effects Compositing and Masking Overview: Compositing and masking Compositing Adjusting opacity and applying blending modes Blending mode examples Blending mode behavior Masking images Creating masks Editing mask groups Optimizing Graphics Overview: Optimizing graphics Optimizing in the workspace Specifying optimization settings for slices Saving and reusing optimization settings Previewing optimization settings and behaviors Previewing buttons and rollovers Estimating file download time Comparing optimization settings Selecting the appropriate file format Choosing GIF Choosing JPEG Choosing PNG Choosing optimization settings for GIFs and PNGs Choosing the color depth Choosing a color palette Dithering to approximate lost colors Setting loss to reduce file size Defining transparent areas Removing all unused colors from the palette Interlacing: Downloading in segments Choosing optimization settings for JPEGs Optimizing color palettes Choosing the appropriate color palette Setting the number of colors in the palette Viewing colors in a palette Locking colors in a palette Editing colors in a palette Setting Websafe colors Saving palettes Exporting Overview: Exporting Exporting an image Results of exporting Exporting with the Export Wizard Optimizing and previewing during export Previewing optimization in the Export Preview Exporting frames or layers as multiple files Exporting an area Exporting sliced objects Using shims or nested tables when slicing Exporting vector paths Exporting to FreeHand and Illustrator Exporting to Macromedia Flash Copying and pasting selected paths Creating Hotspots and Image Maps Overview: Creating hotspots and image maps Choosing an image map source graphic Creating hotspots Creating odd-shaped hotspots Viewing hotspots on the Web Layer Assigning URLs to hotspots Managing URLs with the URL panel Entering absolute or relative URLs Specifying alternate text Choosing a Target option Editing hotspots Setting image map options Exporting image maps Slicing Images Overview: Slicing images Comparing slices with hotspots Drawing slice objects Drawing polygon slices Displaying slices and guides Using the slice overlay Creating a simple sliced image Adding interactivity to slices Naming slices Auto-naming slices Custom-naming slice files Using nested tables and shims Mixing file formats within a sliced image Creating a text slice Creating a replacement slice Creating JavaScript rollovers with slices Creating Buttons Overview: Creating buttons What is a button? Understanding buttons Creating buttons Creating a simple rollover button Editing a button Drawing and editing in the active area Attaching a URL to the button Adding a Down state Adding an Over While Down state Editing button text Using bevel effects to draw button states Creating a navigation bar using nested symbols Converting Fireworks rollovers into buttons Inserting a button from an external source Creating Advanced Rollovers Overview: Creating advanced rollovers Understanding rollovers Matching rollover states with frames Defining the area that activates the rollover Assigning rollover behaviors Choosing the appropriate behavior Assigning URL links to rollovers Creating disjoint rollovers to swap parts of the image Setting a trigger area and a swap area Setting up the Swap Image behavior Setting the mouse event that triggers the behavior Using external files as rollover source Using irregularly shaped or overlapping rollovers Exporting rollovers Creating Animation Overview: Creating animation Planning an animation Creating objects for the animation Setting the animation speed Planning frames Organizing animations with layers Managing frames Adding, moving, copying, and deleting frames Moving and deleting selected objects in the Frames panel Sharing layers across frames Viewing the frames before and after the current frame Creating or importing elements for animation An example of using symbols and instances in animation Tweening instances Controlling the animation Setting the frame delay Setting the number of times the animation plays Showing and hiding frames for playback Optimizing an animation Previewing an animation Exporting an animation Opening an existing animation Opening multiple files as an animation Automating Repetitive Tasks Overview: Automating repetitive tasks Finding and replacing Selecting the source for the search Finding and replacing in multiple files Managing searches with the Project Log Viewing and printing the Project Log Finding and replacing text Finding and replacing fonts Finding and replacing colors Finding and replacing URLs Finding and replacing non-Websafe colors Batch processing Finding and replacing during a batch process Changing file settings with a batch process Backing up batch-processed files Saving batch processes as Scriptlets Running Scriptlets by dragging and dropping Scripting Extending Fireworks Creating command scripts using the History panel Playing steps or commands Renaming and deleting commands Editing or customizing a script Working with Dreamweaver and other HTML Editors Overview: Working with Dreamweaver and other HTML editors Planning your Web site Fireworks HTML overview Using the Update HTML command Copying and pasting Fireworks HTML Export and paste Exporting Fireworks HTML as a file Exporting an HTML file Using Dreamweaver 3 library items Editing Fireworks HTML output styles Placing Fireworks files in Dreamweaver Pasting a Fireworks HTML file into another HTML file Copying JavaScript into an HTML file Copying HTML for client-side image maps Copying HTML for sliced documents Editing Fireworks images placed in Dreamweaver Optimizing Fireworks graphics placed in Dreamweaver Some HTML basics Common HTML tags Keyboard Shortcuts File menu Edit menu View menu Insert menu Modify menu Text menu Window menu Xtras menu Help menu Text Editor Toolbox Miscellaneous
